@font-face : une police personnalisée CSS3

Depuis toujours, les polices personnalisées posaient toujours problème que ce soit pour les webdesigners que les développeurs. Aujourd’hui, grâce à une nouvelle propriété le @font-face, il est désormais possible de mettre des polices sur son site. Ces dernières s’afficheront normalement même si l’utilisateur n’a pas la police installée sur son ordinateur.

La propriété @font-face simple

Pour commencer à utiliser cette propriété CSS3 @font-face simple, il faut charger la police personnalisée dans le navigateur du client. Voici un petit exemple de son application :

Contrairement à ce que certains penseront, ce bout de code n’applique pas un style à un élément, mais permet de déclarer la police qui est ici font_test.tff.
Concernant le content de l’attribut ‘’font-family’’ qui est ici ‘’font_test’’, celui-ci est le nom assigné à la police afin de l’attribuer ensuite sur des éléments. Quant à l’attribut ‘’src’’, ce dernier ne fait qu’indiquer le chemin vers le fichier de police dont les extensions sont .ttf et .otf.Avec juste ces quelques lignes de code, votre police fonctionnera parfaitement sur les versions récentes des navigateurs : Chrome, Opera, Firefox et Safari.

La propriété @font-face ultra compatible

Cette propriété est la petite rebelle du lot. En effet, étant donné qu’IE n’utilise que le format de police Embedded Open Type mieux connu sous l’extension .eot au lieu des classiques True Type .ttf ou Open Type .otf, il va falloir le leurrer pour rediriger Internet Explorer vers un fichier .eot et les autres navigateurs vers les fichiers .ttf ou .otf.

Deux attributs peuvent être ajoutés à la propriété de police @font-face, il s’agit de l’attribut local(“NomDePolice”) utilisé pour prioriser une version locale de la police recherchée si celle-ci existe sur l’ordinateur du client. L’autre attribut est format(“FormatDePolice”) qui est l’attribut servant à préciser le format de la police utilisé. Heureusement, IE ne reconnait aucun de ces attributs et cette faille qui va nous permettre la détection efficace de la police grâce au code suivant :

Une petite explication pour ceux qui se sont perdus en cours de route, dans ce code, IE comprendra la valeur src: url(‘font_test.eot’), mais s’arrêtera sur la valeur src: local (‘x’) qu’il lui sera impossible de lire. La valeur (‘x’) contenue dans local n’a pour seule condition de ne pas être une police existante. Vous n’êtes pas obligé de mettre un x, vous pourrez utiliser n’importe quel caractère simple.
Pour les autres navigateurs, ces derniers ne considèreront que la version de la police qu’est la TrueType universelle en ignorant également la valeur src: local(‘x’).

Vous reconnaitrez que c’est assez fatiguant de devoir gérer tous ces cas manuellement. Heureusement pour nous, il existe des générateurs qui font le travail à notre place comme : le @Font-face Generator de Font Squirrel.

font squirelle

Répondre