Libérez la police (sur le web) avec @font-face

La nouvelle propriété css3 @font-face nous offre la possibilité d’intégrer des polices autres que les sempiternelles verdana, arial, georgia ou times new roman. Et tout ça sans utiliser de javascript ou de solutions flash.

@font-face en action

Pour utiliser la propriété css3 afont-face, il vous faut : la police que vous souhaitez utiliser au format truetype (ttf) ou opentype (otf), la police format propriétaire embed open type (eot) et une feuille de style (css). Dans votre css, il faut d’abord déclarer vos nouvelles polices avec la règle @font-face :

@font-face {
font-family: 'ChunkFiveRegular';
src: local('ChunkFiveRegular'), ('ChunkFiveRegular')
url('fonts/Chunkfive.otf') format('opentype');
}

La première ligne font-family: ‘ChunkFiveRegular’ indique le nm sous lequel vous appellerez plus tard la police dans vos règles css.
La deuxième ligne src: local(‘ChunkFiveRegular’), (‘ChunkFiveRegular’) précise le nom de la police à aller chercher sur le poste client si celle-ci existe.
La troisième ligne url(‘fonts/Chunkfive.otf’) format(‘opentype’) donne le chemin du fichier sur le serveur où aller chercher la police si celle-ci n’existe pas sur le poste client.

Pour styler vos textes ou vos titres avec la nouvelle police ainsi créée, on utilise la propriété css font-family avec – comme tout bon webdesigner le sait – des polices de remplacement si jamais la police principale ne s’affichait pas :
h1 {
font-family: "ChunkFiveRegular", "Arial", "Helvetica", sans-serif;
}

Et c’est tout ! Enfin presque tout…

Internet explorer

Certains navigateurs ne reconnaissent pas les polices au format opentype ou true type, notamment Internet Explorer. Il faut donc ajouter une nouvelle police pour IE au format Embedded open type (oet). Vu qu’IE ne reconnaît aucun autre format de polices, on ajoute cette le nouveau format de police en premier puis pour les autres navigateurs on garde les formats standards open type ou true type. Cela nous donne donc :

@font-face {
font-family: 'ChunkFiveRegular';
/* Pour IE */
src: url('fonts/Chunkfive.eot');
/* Pour les autres : */
src: local('ChunkFiveRegular'), ('ChunkFiveRegular')
url('fonts/Chunkfive.otf') format('opentype');
}

Et c’est tout ! Enfin presque tout…

Chrome

Pour une raison inconnue, chrome, le navigateur de google, n’affichera pas la nouvelle police. Il semble en effet que celui-ci bugue dès l’instant où on cherche une police sur le poste client a l’aide du mot clé local. En supprimant cette partie du process, on règle le problème :

@font-face {
font-family: 'ChunkFiveRegular';
/* Pour IE */
src: url('fonts/Chunkfive.eot');
/* Pour les autres */
/* Pour chrome, on ne vérifie pas si la police existe sur le poste client */
src: url('fonts/Chunkfive.otf') format('opentype');
}

Et c’est tout ! Vraiment tout.

Trouver des polices web

Pour créer votre police au format eot pour IE, il existe un convertisseur de font : ttf2eot. Malheureusement pour les non linuxiens, celui-ci est en ligne de commande et ne propose pas d’interface graphique.

Qu’à cela ne tienne ! Font Squirrel propose une bonne centaine de polices au format eot et ttf (ou otf) sur leur page fontface. Ils vous simplifient même le travail en proposant ces polices sous formes de kit à télécharger comprenant les polices au bon format (eot compris), la feuille de style comprenant les règles pour les afficher et un fichier html d’exemple.

With great power comes great responsibility

Vous savez tout pour la technique. Je tiens quand même à vous rappeler que les polices sont soumises au droit d’auteur et que vous n’avez le droit d’utiliser une typo que si son créateur a explicitement autorisé son usage sur le web. Les typos que vous trouverez sur la page font face de font squirel sont toutes utilisables en ligne.

Being a web designer will soon require a deeper understanding of typography and how typefaces work.

Par ailleurs, la typographie est un élément important du design web. Si elle peut à améliorer grandement la lisibilité et l’aspect d’une page, mal utilisée elle peut aussi ruiner la lisibilité et l’aspect visuel d’un site. Pour quelques notions sur l’utilisation de différentes typo, je vous renvoie à l’article de Jason Santa Maria sur alistapart : On web typography.