@font-face est une règle CSS permettant l’affichage de n’importe quelle police de caractère sur son site web. Présente dans les normes W3C depuis CSS2, @font-face n’a été implémentée que très récemment dans les navigateurs modernes. Exception faite pour Internet Explorer qui l’utilise nativement depuis sa version 4.0 mais dont l’utilisation diffère légèrement.

La règle permet d’outrepasser les carcans typographiques lors de la création d’un site web. Il devient possible d’utiliser n’importe quelle police de caractère pour son webdesign et de ne plus se limiter aux polices usuelles. Cerise sur le gâteau, la dégradation est élégante. En cas de non-support de la règle @font-face par le navigateur, il est possible de substituer une police de caractère standard. Le résultat sera moins esthétique, mais l’expérience utilisateur ne sera pas détériorée.

Sous réserve d’avoir un navigateur au moteur de rendu assez récent – ce qui tend plus ou moins rapidement vers la majorité des internautes – le visiteur pourra gouter aux joies d’une typographie innovante et décomplexée. Néanmoins, cette technique possède quelques inconvénients.

La compatibilité

Comme noté précédemment, la règle est plutôt récente. Ainsi, seuls quelques moteurs de rendu l’interprètent correctement :

• Gecko 1.9.1+ – Mozilla
• Trident (Tasman sur Mac) – Microsoft
• Presto 2.2+ – Opera
• Webkit 525+ – Apple

Plus concrètement, les navigateurs compatibles avec la règle @font-face sont :

Gecko

• Firefox 3.5+
• SeaMonkey 2.0+
• Flock 2.1+

Trident

• Internet Explorer 4.0+
• Avant Browser
• AOL Explorer
• Maxthon

Presto

• Opera 10+
• Opera Mobile 9.7+

Webkit

• Safari 3.1+
• Chrome 0.4+
• iCab 4.2+
• Omniweb 5.8+
• Android 1.0+
• Sunrise 1.7.5+

Le + signifie une compatibilité avec les versions ultérieures.

Ces navigateurs se répandent de plus en plus mais il faudra parfois utiliser des stratagèmes pour afficher des polices différentes dans les navigateurs non-supportés.

La conversion de police pour Internet Explorer

A l’époque, lors de la sortie de CSS2, Internet Explorer était le seul bon élève à implémenter la règle. Lui seul permettait l’utilisation de polices exotiques. Malheureusement, le petit polisson s’est reposé sur ses lauriers et pendant que tous ses camarades le dépassaient, lui refusait de perdre sa fierté et restait sur ses positions obsolètes.

Ainsi, le navigateur de Microsoft ne supporte actuellement pas les fichiers TTF et OTF. Il s’évertue à n’interpréter que les fichiers EOT. Il faut donc passer par une étape de conversion via des outils adaptés :

WEFT

Le logiciel préhistorique de Microsoft. Aussi bien dans l’apparence que dans l’ergonomie. Bon courage si vous parvenez à en tirer quelque chose.

ttf2eot

Un utilitaire en ligne de commande qui effectue une conversion de fichier TTF vers EOT. Si jamais vous avez une police OpenType, vous devrez d’abord la convertir en TrueType.

Font Squirrel @font-face Generator

Le meilleur pour la fin. Non content de proposer des polices de caractères de qualité, Font Squirrel met à la disposition de tout un chacun un outil de conversion de fontes.

Une fois le fichier EOT obtenu, il faut l’intégrer à sa feuille de style CSS. L’usage d’une syntaxe spéciale est de rigueur pour éviter à Internet Explorer le téléchargement de fichiers inutiles. Lors de l’utilisation conventionnelle de la règle, le navigateur télécharge le fichier TTF/OTF, même s’il ne peut rien en faire. Pour éviter les requêtes HTTP inutiles, nous utiliserons cette solution :

@font-face {
font-family: FontName;
src: url(FontFileName.eot); /* IE */
src: local(FontName), url(FontFileName.ttf) format("truetype");
}

Internet Explorer ne comprend pas l’attribut local() et va donc ignorer la ligne en question. Les autres navigateurs respectent la norme CSS3 qui n’inclue pas le format de fichier EOT. Les navigateurs récents ignoreront donc la ligne réservée à Internet Explorer.

La licence de distribution des polices de caractères.

La où des outils comme sIFR, FLIR ou encore Cufon permettait l’utilisation de n’importe quelle police sans problèmes, le fichier n’étant pas directement accessible à l’utilisateur, @font-face permet le téléchargement direct de la fonte utilisée sur le site.

Impossible donc d’utiliser des polices commerciales puisque cela irait à l’encontre des conditions de redistribution. Attention néanmoins aux fontes libres sous licence GNU/GPL ou Creative Commons. Elles ne peuvent parfois être utilisées que sous certaines conditions.

Le poids des fichiers

Un fichier de police de caractère est généralement assez lourd. Plus encore s’il est correctement créé et qu’il comporte l’ensemble des caractères nécessaires à l’écriture d’un texte complet. Il est assez difficile d’obtenir une taille moyenne précise mais elle doit tourner aux alentours de 150 ko par fichier.

Si on souhaite utiliser l’ensemble des graisses (épaisseur des caractères) et des italiques disponibles, il faudra bien souvent utiliser 4 ou 5 fichiers pour une seule police de caractère. C’est un poids non négligeable à télécharger pour le visiteur, et ce même si le téléchargement est asynchrone.

Pour obtenir un ordre d’idée, l’ensemble des fichiers composant la police Arial (Normal, Bold, Italic et Bold Italic) fait environ 1,2 Mo. Plutôt lourd à intégrer sur un site.

Cependant, relativisons. Ces points négatifs ne sont pas insurmontables. Ils nécessitent un effort à fournir, mais pas plus que lors de la mise en place d’une autre solution. Au contraire, l’utilisation d’images, de Flash ou de javascript comportent bien souvent beaucoup plus de désavantages que @font-face.

Pour la première fois, les webdesigners ont accès aux polices de leur choix. Pour la première fois, ils peuvent laisser libre cours à leur imagination sans limites d’aucune sorte. Les outils sont entre leurs mains. A eux d’en faire bon usage.