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

Astuce par (Lyon, France)
Créé le , mis à jour le (281628 lectures)
Tags : css, design, webdesign, police, fonte, typographie, @font-face

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.

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ève - à quelques réserves près, tout de même - était Internet Explorer). Les problèmes rencontrés étaient les suivants:

  1. 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;
  2. les fontes rajoutaient un poids conséquent aux pages (jusqu'à plusieurs centaines de Ko);
  3. 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 (EOT) 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

Navigateurs Versions
Firefox Firefox 3.5+
Opera Opera 10.0+
Internet Explorer Internet Explorer 9+
format EOT depuis la 5.5+
Google Chrome Google Chrome 2+
Safari Safari 3.2+

Pour les navigateurs mobiles : iOS 4.2+, Opera Mobile 10+, Android 4+

  • 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, mais d'autres formats ont le vent en poupe, à commencer par le WOFF.

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 ou encore le Font-face Generator de Font-Squirrel, qui génére une archive (zip) comprenant le format des différentes polices, le code CSS @font-face, ainsi qu'une démonstration HTML. Article (en anglais) présentant Font-Squirrel.

Le support dans les navigateurs évolue assez rapidement. 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 testez.

Google Web Fonts

Une solution rapide et alternative consiste à utiliser des services web externes proposant des collections de fonts à inclure, gratuitement ou non.Le service le plus populaire est Google Web Fonts qui est relativement performant, et dont le choix est très vaste. Il suffit de copier-coller un bref extrait de code en JavaScript dans l'en-tête du site, pour pouvoir profiter de la police dans @font-face.

 

Google Web Fonts

Deux autres solutions se dégagent du lot :

Typekit (payant selon les ressources utilisées)

Font Squirrel

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.

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:

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.

Ressources