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

La règle des @font-face reste le mécanisme de référence pour utiliser dans une page Web une fonte non disponible sur le poste client. Supprimée de CSS 2.1, elle sera réintégrée dans CSS 3.

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).

La règle des @font-face reste la référence pour utiliser dans une page Web une fonte non disponible sur le poste client

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), Firefox (version 3.5) et Opera (version 10). Google Chrome, basé sur le même moteur que Safari (Webkit), ne devrait pas tarder à l'intégrer.

Reste Internet Explorer :

 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. (Mise à jour: d'autres propositions semblent mieux parties pour devenir des standards en la matière.)

Pour adresser une fonte EOT à Internet Explorer et une fonte dans un format différent aux autres navigateurs, on pourra utiliser la syntaxe proposée par Paul Irish.

Pour convertir une fonte TTF en EOT, on pourra utiliser l'outil ttf2eot, aussi disponible directement en ligne.

Le support dans les navigateurs évolue assez rapidement (à 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, notamment sous Windows. Une seule solution: renseignez-vous (et attention, les ressources sur le sujet «périment» rapidement), et testez.


Autres techniques

Il existe quelques autres techniques pour utiliser une fonte personnalisée dans une page Web. Notons tout de suite qu'absolument aucune de ces solutions n'est pertinente pour les principaux textes d'une page. On les réservera à des éléments précis de l'interface d'un site et au titrage.

Le moyen le plus simple d'être sûr du rendu visuel d'un texte dans une page Web est d'utiliser une image. Cela peut être fait de manière accessible si on place l'image dans le code HTML (élément img), avec un texte alternatif (attribut alt) correct.

Petit exemple :

 <h2>
 <img src="content/titre-article-187.png"
     alt="Le livre et la dématérialisation des œuvres" />
</h2>

Problème : si c'est tout à fait gérable pour l'interface d'un site (logo, nom du site, quelques boutons et intitulés), cela devient plus difficile pour les contenus amenés à changer régulièrement, tels que des titres d'article.

Une bibliothèque de fonctions PHP pour la génération d'images de fonte

Notez que ce type d'image peut être généré côté serveur par un script (en PHP, Perl, Python, Ruby ou autre), qui utilisera le plus souvent une bibliothèque de fonctions pour la génération d'images. Pour mettre cette solution en place, il faudra être développeur Web ou utiliser un des rares CMS proposant cette fonction. Notez que même si le CMS propose ce type de fonctions, les bibliothèques de fonctions nécessaires pour qu'elles fonctionnent ne seront probablement pas disponibles sur un hébergement mutualisé (hébergement classique pour les petits sites).

On pourra aussi utiliser certains utilitaires en JavaScript, ou des utilitaires qui combinent JavaScript et Flash. Ces différents utilitaires cherchent à émuler le fonctionnement de @font-face, mais ont des limites assez importantes (suivant les cas : mauvaise gestion des caractères accentués, ou bien impossibilité d'afficher du texte sur deux lignes). À utiliser avec modération et précaution !

Voici une liste non exhaustive de ces utilitaires :

 sIFR (Scalable Inman Flash Replacement) 3 (JS + Flash);
 FLIR (Facelift Image Replacement) (JS + PHP);
 typeface.js (JS + SVG/VML);
 Cufón (JS + SVG/VML).


Tester la disponibilité d'une police

Une astuce en jQuery permet de détecter la présence d'une police. Il s'agit d'une fonction de quelques lignes, nommée Fontavailable, qui calcule la différence entre le rendu obtenu avec une police souhaitée (ex : Verdana) et une police inexistante (ex : Kiwifont).

Si on obtient la même valeur (la même largeur en pixels), alors il est fortement probable qu'aucune n'existe sur le système du visiteur. Si on obtient une valeur différente, c'est que la police testée a été rendue d'une manière graphiquement différente de la police inexistante, elle est donc disponible.

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