Une police personnalisée en CSS avec @font-face

Vous en avez assez des polices traditionnelles telles que Verdana, Helvetica ou encore Arial ? Ne vous en faîtes pas : j'ai la solution. Et celle-ci existe depuis quelques temps déjà : il s'agit de l'instruction CSS 2 (eh oui... les spécifications possèdent encore des secrets pour bon nombre de développeurs) font-face. Avec celle-ci, vous serez capable d'utiliser vos polices personnalisées.

Utilisation de @font-face

Son principe est très simple : cette instruction ordonnera au navigateur de télécharger le fichier contenant la police concernée, vous autorisant à l'utiliser par la suite. Voyons donc comment l'utiliser :

@font-face {
    font-family: HoneyScript;
    src: url("fonts/honeyscript-light.ttf");
}

h1 { font-family: HoneyScript Verdana Arial; }

Deux éléments sont importants : définir le nom de la police tel que nous l'utiliserons dans nos styles, et indiquer l'emplacement du fichier de la police concernée. Votre fichier devra être au format TrueType Font (extension *.ttf) ou en OpenType Font (extension *.otf) pour être accepté par les navigateurs.

On peut alors ensuite utiliser la police que nous avons défini, tout comme les polices standards. Nous utilisons ici une des nombreuses polices téléchargeables sur la référence en la matière, DaFont : HoneyScript.

Ce code fonctionne pour tous les navigateurs récents. Tous ? Non. Seul un petit village d'irréductibles gaulois... navigateur persiste à faire dans l'originalité. Je veux bien entendu parler d'Internet Explorer.

@font-face et Internet Explorer

Convertir un TTF ou un OTF en EOT

Heureusement, ce cauchemardesque navigateur implémente tout de même la directive @font-face. Mais il n'accepte ni les fichiers TTF, ni les fichiers OTF. Cela aurait été étonnant de la part du géant de Redmond de ne pas imposer un format propriétaire complètement obsolète. En effet, IE n'accepte que le format Embedded OpenType (extension *.eot).

Par miracle, il existe des convertisseurs entre ces différents formats de polices. Bien qu'en farfouillant sur le Net cette conversion s'avère des plus hasardeuses, je n'ai pas eu de mauvaises expériences pour ma part.

Pour les Windowsiens, il existe un logiciel fourni par Microsoft : Web Embedding Fonts Tool. Je n'ai pas pu tester cet outil, étant sous Linux. Mais n'hésitez pas à faire part de vos retours dans les commentaires.

Quant aux pingouphiles (Linux) et aux adorateurs de Steve Jobs (Mac OS), il existe un petit utilitaire présent sur Google Code dénommé ttf2eot. Nom concis et efficace, tout comme le logiciel. :)

Il vous suffira de le télécharger, de le décompresser, et de le compiler.

$ wget http://ttf2eot.googlecode.com/files/ttf2eot-0.0.2-2.tar.gz
$ tar -xf ttf2eot-0.0.2-2.tar.gz
$ make

Puis, on lance la conversion grâce à la commande suivante :

$ ttf2eot fonts/honeyscript-light.ttf fonts/honeyscript-light.eot

La conversion est achevée.

Directive @font-face pour Internet Explorer

A présent, il ne nous reste plus qu'à ajouter une directive spécialement à Internet Explorer. Pour ce faire, et pour ne pas interférer avec les navigateurs normaux, nous utiliserons des commentaires conditionnels.

On insère donc la directive @font-face spéciale IE dans notre balise >head< :

<!--[if lte IE 8]>
<style type="text/css">
	@font-face {
		font-family: "HoneyScript";
		src: url("fonts/honeyscript-light.eot");
	}
</style>
<![endif]-->

Plus qu'à admirer le résultat. :)

Inconvénients de @font-face

Finissons cet article par une pointe de pessimisme. :p

Un fichier de police a un poids important pour une page Web (généralement entre 50 ko et 1 Mo). Certes, nous avons tous (ou presque) des connexions de roxxors, et donc, nous n'avons pas à nous soucier de la taille des fichiers comme à l'époque du 56k. Cependant, la rapidité d'affichage est depuis peu un critère de référencement pour Google (et autres ?). De plus, les internautes d'aujourd'hui sont bien plus impatients qu'il y a quelques années. Prenez donc garde à ne pas trop faire attendre vos visiteurs.

Par ailleurs, attention à la lisibilité de vos polices. D'un navigateur à l'autre, l'affichage peut varier. De même, d'un système à l'autre (j'en fais l'expérience, travaillant à 70 % sous Linux, 20 % sous Windows et 10 % sous Mac en ce moment). Veillez donc bien à tester vos polices sur un maximum de configurations possibles.

C'est tout. Il y a plus déprimant comme final, n'est-il pas ? Bref, comme toutes les bonnes choses, vous pouvez l'utiliser, à condition de ne pas en abuser. ;)