L’émergence de @font-face

Pour tout professionnel du web, l’utilisation de polices autres que celles disponibles sur le système des internautes a toujours été jusqu’à présent un exercice délicat et complexe. Nous avons déjà évoqué il y a quelques mois les différentes solutions pour personnaliser les polices de caractères. Avec l’évolution des navigateurs la propriété @font-face refait surface. Cet article dresse un état des lieux et donne les perspectives d’évolution d’une technique qui change déjà notre façon d’appréhender la typographie sur Internet pour les prochaines années.

Historique

Un rapide historique :
– La norme CSS 2, publiée en 1998, définit la règle @font-face
– Elle est peu implémentée, le seul navigateur la supportant était Internet Explorer, mais avec un format propriétaire
– La plupart des polices disponibles sont protégées par les droits d’auteur
– Les polices ajoutent un poids conséquent aux pages
– Lors de la publication de la norme CSS 2.1, @font-face est supprimé
– Lors de la publication de la norme CSS 3, @font-face refait surface

Syntaxe

On importe trois polices de la même famille dans les style CSS : regular, italic, bold.


@font-face <em>font-family : "nom-police" ; ? src : url('nom-police-Regular.ttf') ; ?
</em>

@font-face <em>font-family : "nom-police" ; font-weight : bold ; ? src : url('nom-police-Bold.ttf') ; ?
</em>


On appelle les polices aux endroits nécessaires :


body <em>font-family : "nom-police", Helvetica, Arial, sans-serif ; ?
</em>

p <em>/* Utilisera nom-police-Regular.ttf */
font-style : normal ; ? font-weight : normal ;
 ?</em>


Support

Aujourd’hui, @font-face revient sur les devants de la scène grâce à son support maintenant implémenté correctement par tous les navigateurs récents : Safari 3+, Google Chrome 3+, Firefox 3.5+ et Opera 10+. Contrairement à ce que l’on pourrait penser, Internet Explorer le prend en charge depuis sa version 4, certes en utilisant un format propriétaire–l’Embedded OpenType (EOT)–mais grâce à quelques astuces, cela n’engendrera pas assez de contraintes pour rebuter un web designer connaissant quelque peu la technique.

Formats

En ce qui concerne les formats, nous pouvons relever plusieurs informations intéressantes sur les futures innovations dans le domaine.

Microsoft a proposé une spécification du format EOT au W3C pour en faire un format standard, mais d’autres propositions semblent mieux parties pour devenir des standards en la matière :

• SVG, supporté par Chrome et Opera,
• WOFF, développé par Mozilla.

Le but de ces nouveaux formats étant de répondre aux contraintes actuelles des formats TTF et OTF. Ces derniers ne sont clairement pas « web », notamment à cause de leur poids conséquent. Ils peuvent aussi être facilement piratés, ce qui rend @font-face uniquement utilisable avec des polices libres. Quelques unes de ces nouveautés seront donc la compression directe et le système de licence intégrée au fichier.

Implémentation

Après avoir relevé un certain nombre de conseils quant à l’application de la fonction @font-face, j’ai pu effectuer mes tests. Voici ce qui en est ressorti.

Pour adresser une police EOT à Internet Explorer et une police TTF ou OTF aux autres navigateurs, la syntaxe la plus courante–que l’on doit à Paul Irish–est aujourd’hui la suivante :


@font-face <em> ?
font-family : 'AllerRegular' ; ?
src : url('AllerRegular.eot') ; /* for IE */ ?
src : local('AllerRegular'), local('AllerRegular'), url('AllerRegular.ttf') format('truetype') ; ?
</em>


Nous distinguerons la première commande spécifique pour IE et la deuxième pour les autres navigateurs. Par chance, la deuxième n’étant pas reconnue par IE, elle est ignorée. Ce qui nous permet d’éviter l’utilisation de commentaires conditionnels spécifiques à IE. Puis on précise le format, Open Type ou True Type Fonts. Ceci est important, il semble que cela participe au non double téléchargement d’Internet Explorer.

Pour ceux qui désirent aller plus loin, d’autres techniques sont énoncées sur le site de Paul Irish. Citons comme exemple la technique du « smiley« . Celle-ci est recommandée si vous pensez qu’une version installée sur le poste client n’est pas au mieux de vos
intérêts.

Ressources

Actuellement, j’ai pu relever deux sites intéressants autour du sujet @font-face :

• http://www.fontsquirrel.com/
• http://typekit.com/

Le premier permet de récupérer des polices gratuites dans les deux formats nécessaires. Dans le cas où le format TTF ou OTF est uniquement disponible, il existe des convertisseurs permettant de créer une version EOT. Nous pouvons retenir ceux là :

• Les services basés sur le projet ttf2eot
• Font-face Generator de Font-Squirrel : http://www.fontsquirrel.com/fontface/generator

Le deuxième, Typekit, est aujourd’hui l’une des rares solutions permettant de gérer les DRM sur des polices non libres, un marché en pleine construction. Le problème de ces solutions actuelles est la nécessité de passer par du JavaScript. Nous pouvons retrouver plus de détails sur ces solutions dans notre précédent article : polices de caractères personnalisées sur le web : quelles solutions ?.

Performances

Selon les navigateurs, il est intéressant de noter un comportement différent propre à chacun lors du chargement des polices. À priori :

• Firefox et Opera chargent la page avec une police système. Les autres affichent le texte une fois la police chargée, alors que IE n’affiche rien avant que la police soit chargée si une balise script se situe avant @font-face.
• IE télécharge la police dès qu’il rencontre @font-face alors que les autres navigateurs le font dès qu’ils rencontrent la commande font-family.
• Inclure une propriété « font-variant » dans la définition de font-face ne fonctionnera pas dans Safari 4 ainsi que IE 6-8.

Tous pourront s’apercevoir qu’Internet Explorer est le plus lent à charger une police lors de la première visite d’un site utilisant @font-face, mais aussi à effectuer son lissage. J’ai donc cherché comment optimiser ce chargement.

Voici ce que l’on peut retenir :

• Il faut Gziper pour gagner jusqu’à 40 % du poids total de la police
• Utiliser intelligemment le cache et les téléchargements parallèles
• Utiliser le principe du « Lazy Loading » en JavaScript.

?On appelle « Lazy Loading » la technique qui consiste à ne charger que les éléments correspondants à la demande spécifique du programmeur.

• Définir @font-face le plus haut possible (avant le script aussi de préférence)

Rendu

Le support de @font-face évolue assez rapidement dans les navigateurs, à l’exception d’Internet Explorer pour l’instant. Non seulement, les formats supportés varient, mais aussi la qualité du rendu, qui peut être problématique dans certains navigateurs. C’est une chose que nous avons pu remarquer sous Windows notamment.

Selon le choix des polices d’écriture et leur taille, on remarque un mauvais lissage des polices sur Internet Explorer 6 et les premières versions de Firefox supportant @font-face. Cela serait dû à une non/mauvaise gestion du lissage des polices sous Windows. Mac OS et Linux prennent en charge tout lissage de police sur le système de manière impeccable. Actuellement, la maîtrise parfaite des rendus de police passe donc encore par une phase de test, ainsi on ne peut que conseiller de suivre l’évolution des supports navigateurs à ce niveau.

Conclusion

Enfin une amélioration de la norme CSS3 accessible pour l’ensemble des navigateurs. Bien que celle-ci soit encore perfectible aujourd’hui, les améliorations seront bientôt telles que @font-face sera simple et efficace à mettre en place. Restera toujours le problème d’un Internet Explorer dépassé, mais j’ose croire que la logique de « dégradation Élégante » s’imposera avec le temps jusqu’à ce qu’elle soit rattrapée par l’abandon des navigateurs obsolètes. C’est à ce moment précis que la propriété @font-face sera devenue une norme opérationnelle.

Sources

• [Font-Face in depth-> http://www.useragentman.com/blog/2009/09/20/font-face-in-depth/],
• [Font-Face and performance-> http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/]
• [Un site entièrement en @font-face-> http://nicewebtype.com/fonts/museo-and-sans/]