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.

Réagissez

Si ce billet vous a plu ou si vous voulez apporter des précisions, ou si vous n’êtes pas d’accord avec ce que je raconte, c’est ici qu’il faut vous manifester. Je me réserve toutefois le droit de supprimer toute contribution insultante ou qui n’aurait rien à voir avec la choucroute.

  1. Clair, net et précis comme d’hab.
    J’ajoute juste que le rendu des font peut être tees différents d’un système d’exploitation (+navigateur) a l’autre. A prendre en considération lors des testes donc.

  2. […] CSS3 nous apporte que de bonne chose dont @font-face expliqué en détail par Barbablog : Libérez la police sur le web avec @font-face | Barbablog. […]

  3. Je suis entièrement d’accord avec Willy et c’est d’ailleurs là un peu le souci que j’ai avec @font-face. Sur Windows, le rendu est nettement moins bon que sur Mac OSX et notamment sur IE. J’ai cherché ici et là des possibilités de modifier ce rendu, mais après différentes tentatives, je n’ai rien trouvé de concluant, si ce n’est d’utiliser Typekit.

  4. problème récurrent à signaler sur IE (toutes versions) : l’antialiasing de windows (cleartype) peut être destructeur pour certaines polices.
    Toujours vérifier sur plusieurs PC Windows différents si le crénelage n’est pas trop fort.

  5. La différence entre @font-face (qu’il faut utiliser encore avec de multiples précautions et j’aurais dû le mentionner dans l’article) et les cufon, typekit ou autres techniques de remplacement, c’est qu’avec @font-face on peut utiliser des polices autres que les polices websafe sur de grands blocs de textes – chose quasi impossible à réaliser avec cufon ou Sifr sans mettre à plat le navigateur.

    Evidemment, puisqu’on reste dans l’univers du web et e ses multiples plateformes / navigateurs, l’utilisation de @font-face n’exclue en rien une bonne phase de test sur les différents navigateurs et os.

  6. Tu peux utiliser Typekit sur de grands blocs de texte, mais je ne le conseillerais ni avec cet outil ni avec @font-face… Cela dit, personnellement, j’utilise maintenant toujours une de ces solutions sur mes sites clients. Elles ont remplacé Cufon qui garde cela dit tous ses avantages…

  7. Libérez la police (sur le web) avec @font-face http://bit.ly/cdMcqI

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *