Comment utiliser une fonte "non-standard" sur un site Web ?

Il est de notoriété publique que l'usage des fontes sur le Web est limité à une poignée de fontes non pas standardisées, mais suffisamment répandues pour pouvoir être utilisées sans trop de risques. Et cela pour une raison très simple: la police de caractères que l'on souhaite utiliser doit être présente sur le système de l'utilisateur pour être utilisée par le navigateur.

Cela reste très vrai, mais avec quelques subtilités que nous abordons dans cet article.

Quand @font-face tombe à l'eau

CSS 2 (publié en 1998) comprenait un mécanisme qui autorisait les auteurs de pages Web à proposer une fonte au téléchargement, fonte qui serait ensuite utilisée dans la page. Il s'agit de la règle @font-face. Mais celle-ci a été peu implémentée par les navigateurs, ou alors partiellement. (En l'occurrence, le bon élèven - à quelques réserves près, tout de même - était Internet Explorer !).

Les problèmes rencontrés étaient les suivants:

 La plupart des fontes disponibles sont protégées par le droit d'auteur et ne peuvent pas être redistribuées, y compris comme fonte "intégrée" à un site Web,
 Les fontes rajoutaient un poids conséquent aux pages (jusqu'à plusieurs centaines de ko),
 Les développeurs des navigateurs étaient peu enclins à affronter les deux problèmes ci-dessus (surtout le premier).

Pendant longtemps, le seul navigateur à avoir un support tout relatif de @font-face était Internet Explorer. Mais il fallait utiliser un format de fonte un peu obscur, propriétaire, et généré par des outils peu disponibles. Bref, c'était assez limité.

Lorsque le groupe CSS a publié CSS 2.1 (correctif de CSS 2 qui, entre autres, supprime un certain nombre de choses peu réalistes, pas ou mal implémentées, etc.), @font-face a été supprimée.

Quand @font-face revient

En réalité, @font-face n'a pas été supprimée de CSS, elle a juste été repoussée à CSS 3. Cette règle reste le mécanisme de référence pour utiliser dans une page Web une fonte non disponible sur le poste de l'utilisateur.

Voyons rapidement sa syntaxe:

@font-face {
 font-family: "Ma Super Fonte";
 src: url('MaSuperFonte-Regular.ttf');
}
@font-face {
 font-family: "Ma Super Fonte";
 font-style: italic;
 src: url('MaSuperFonte-Italic.ttf');
}
@font-face {
 font-family: "Ma Super Fonte";
 font-weight: bold;
 src: url('MaSuperFonte-Bold.ttf');
}

Dans cet exemple, pour une même famille de fontes on importe trois fontes : regular ("normale"), italic et bold. On pourra ensuite, dans le code CSS de nos pages, demander la police de caractères "Ma Super Fonte" pour chacune de ces trois fontes.

Par exemple:

body {
 font-family: "Ma Super Fonte", Helvetica, Arial, sans-serif;
}
h1 {
 /* Utilisera MaSuperFonte-Bold.ttf */
 font-style: normal;
 font-weight: bold;
}
h2 {
 /* Utilisera MaSuperFonte-Italic.ttf */
 font-style: italic;
 font-weight: normal;
}
h3 {
 /* Utilisera ??? (fonte bold italic non chargée!) */
 font-style: italic;
 font-weight: bold;
}
p {
 /* Utilisera MaSuperFonte-Regular.ttf */
 font-style: normal;
 font-weight: normal;
}

Support de @font-face par les navigateurs

Le support de @font-face est disponible dans Safari (version 3), sera disponible dans Firefox 3.1 et Opera 10. Google Chrome, basé sur le même moteur que Safari (Webkit), ne devrait pas tarder non plus.

Reste Internet Explorer. Rien n'a été annoncé pour IE8, mais voici ce que l'on sait:

 Internet Explorer implémente @font-face pour un format précis : l'Embedded OpenType (EOT),
 Microsoft a proposé une spécification du format EOT au W3C pour en faire un format standard.

Dans le pire des cas, et sans doute au moins pour une période de transition (vers une standardisation de EOT et son support par les autres navigateurs, ou le support des fontes TrueType et OpenType avec @font-face dans Internet Explorer), on pourra utiliser les commentaires conditionnels pour gérer IE séparément des autres navigateurs.

À noter aussi qu'au moment d'écrire ces lignes il n'existe pas d'outil simple d'emploi pour convertir des fontes au format EOT. WEFT, l'outil proposé par Microsoft, serait compliqué, pour ne pas dire très contrariant, à l'usage. Si EOT passe les procédures de standardisation au W3C, on peut espérer des outils améliorés de la part de Microsoft et d'autres éditeurs.

Rappelons que le format EOT offre aux éditeurs de fontes un plus grand contrôle sur les droits de distribution. Ce n'est pas un contrôle fort (de type DRM), mais de simples métadonnées qui indiquent aux navigateurs pour quels sites ou domaines la fonte EOT est utilisable. Cette information peut être modifiée facilement, et vise simplement à éviter des usages inappropriés par des utilisateurs non avertis.

Ce contrôle pourrait bien être nécessaire d'un point de vue juridique, pour intégrer une fonte téléchargeable (par le navigateur) à un site Web.

À l'heure actuelle, la question fait l'objet de discussions au sein du W3C. La dernière version du brouillon du module Web Fonts date de 2002, et rien ne garantit qu'elle reste en état. Il est probable que les implémentations de @font-face récentes (Safari 3, Firefox 3.1, Opera 10) soient maintenues, mais la question du ou des formats à supporter reste en suspens.

Article publié sous licence Creative Common par Florent V. sur  Alsacreations.com