Aller aux menus

#CSS {débutant;}

• Premiers pas
• CSS3
• Tutoriels
• Livre
• Boite à Outils

CSS 3 : déclarer une police de caractère non standard avec @font-face

Le sélecteur @font-face existe depuis très longtemps : depuis les CSS 2.0. Mais seul Internet Explorer l'implémentait depuis sa version 4 (oui, oui, vous avez bien lu !) et avec un format de police propriétaire peu pratique. Cela n'a donc jamais pris. Heureusement, il y a maintenant des moyens simples pour surmonter cet écueil.

La police de caractère, ou plutôt les différents formats de la police de caractère, doit être placée sur le serveur. Comme pour une image de fond, elle sera chargée au moment de l'appel de la feuille de style dans laquelle est déclarée @font-face.

Il y aura donc les mêmes contraintes techniques et éthiques qu'avec une image :

1. il faut faire attention au poids pour éviter des lenteurs de chargement et donc les problèmes de performances ;
2. les droits d'auteur sont peut-être encore plus féroces que pour les images, il faut donc n'utiliser que des polices dont on est en accord avec la licence.

Pour l'exemple je vais utiliser la police de caractère quadranta, gratuite, disponible sur le site Dafont.

Étape 1 : obtenir tous les formats nécessaires

Quadranta est téléchargeable sous le format .otf (OpenType Font). Ce format est reconnu par Firefox, Chrome, Safari, Opéra. En revanche il n'est reconnu ni par MSIE, ni par certains navigateurs de smartphones.

Pour être complet, il donc faut aussi avoir cette police aux formats .eot (Embedded OpenType, pour MSIE) et .svg. Existent aussi les formats .ttf (TrueType Font, très répandu) et .woff (Web Open Format Font) qui est le petit format qui monte, qui monte.

Je vous vois écarquiller les yeux, vous demandant où et comment vous allez pouvoir récupérer tous ces formats... Pas de panique, FontSquirrel est là. Ce générateur de font-face va vous fournir tous les formats nécessaires en moins de temps qu'il faut pour le dire.

Je dispose donc au final des fichiers suivants (ainsi qu'un .ttf qui ne me servira pas) :

• quadranta.otf : 20 ko
• quadranta.woff : 26 ko
• quandrata.eot : 35 ko
• quadranta.svg : 58 ko

Pour des raisons de performance il faudra que l'ordre de déclaration des différents formats soit identique (du plus léger au plus lourd).

Étape 2 : coller le code dans la feuille de style

Non seulement FontSquirrel fournit les différents formats, mais il fournit aussi le code CSS qui va bien. Après avoir reclassé les formats par poids croissant et remplacé le .ttf par .otf, il est de ce type :

Code CSS

@font-face {
font-family: 'quadranta';
src: url('quadranta.eot');
src: url('quadranta.otf') format('truetype'),
     url('quadranta.woff') format('woff'),
     url('quadranta.eot?#iefix') format('embedded-opentype'),
     url('quadranta.svg#QuadrantaBold') format('svg');
font-weight: normal;
font-style: normal;
}

Le nom déclaré par font-family sera celui à utiliser dans le reste de la feuille de style aux endroits souhaités.

L'ancre #QuadrantaBold déclarée pour le format .svg est nécessaire pour que les navigateurs retrouvent leurs petits. C'est en effet l'id inscrit dans le fichier svg et qui indique le chemin à suivre. Il ne faut donc pas modifier cette déclaration.

Restent les déclarations .eot : pourquoi 2, pourquoi différentes ?
MSIE a beau être le navigateur le plus ancien à implémenter @font-face, il fallait quand même bien qu'il complique un peu les choses, sinon ce ne serait pas drôle... Il y a une question de performance (sinon MSIE charge tous les formats, même ceux qu'il ne gère pas) et ensuite les nouveautés d'IE9, qui comprend d'ailleurs le format .woff plus léger et qu'on préférera lui faire ingurgiter...

En fait, cette double déclaration peut être remplacée par une seule :

url('quadranta.eot?') format ('eot')

Tout est dans le ? et la déclaration de format('eot'). Et si vous voulez comprendre le pourquoi du comment, courez sur Typographisme qui explique tout ça très bien.

Le format .eot devant être déclaré en 1^er, le code CSS final sera donc :

@font-face {
font-family: 'quadranta';
src: url('quadranta.eot?') format('eot'),
     url('quadranta.otf') format('truetype'),
     url('quadranta.woff') format('woff'),
     url('quadranta.svg#QuadrantaBold') format('svg');
font-weight: normal;
font-style: normal;
}	 
h4 {
font-family:quadranta, sans-serif;
font-size:3em;
}

Code HTML

<h4>
 Mammouthland
</h4>

Zone de test

C'est-y pas beau ?

Petits bémols : selon la qualité de l'écran et/ou de la carte vidéo, le navigateur utilisé, l'OS, les résultats peuvent être décevants.
D'autre part, d'un point de vue accessibilité, faites toujours attention à ce que la police de caractère choisie soit facilement lisible. L'originalité d'accord, mais si c'est pour ne rien pouvoir déchiffrer, ce n'est pas la peine...

Lectures complémentaires

• Tests et critiques de @font-face dans différents navigateurs (CoverPrestige)
• Les formats de police typographiques pour le web (Typographisme)

Haut