Embarquer des polices « non standard »

Nous sommes de plus en plus sollicités pour intégrer des polices non standard dans nos projets. D’excellentes solutions de font-replacement existent, comme sIFR pour une méthode flash ou Cufón pour du javascript.

Toutefois, les navigateurs étant de plus en plus performants, il devient intéressant de se tourner vers la méthode CSS en utilisant @font-face.

Cette technique est un peu moins évidente à mettre en place qu’un font-replacer, mais le résultat est à la hauteur des espérances.

Les formats de police

Actuellement, nous trouvons, sur nos systèmes, deux types de formats: TrueType (.ttf) et OpenType (.otf).

Il est intéressant d’utiliser des polices exotiques dans nos designs et surtout, de les utiliser sur un site web, mais toutes les fontes ne sont pas libres de droits et si on peut se procurer des polices libres assez facilement, généralement leur auteur réclame un lien en retour et/ou de ne les utiliser que sur des sites à vocation non-commerciale.

Heureusement, de plus en plus de ressources dédiées au font embedding émergent, comme par exemple Font Squirrel, qui, en plus de proposer des polices libres de droits, fournit des kits@font-face permettant l’implémentation rapide des polices sur votre site, avec tous les formats de fontes et un exemple HTML/CSS.
Néanmoins, nous verrons ici comment convertir les formats afin de couvrir le plus grand nombre de navigateurs avec cette méthode.

Le support des navigateurs

A partir des deux formats nommés juste au dessus, TrueType et OpenType, nous pouvons assurer un rendu des polices avec Firefox 3.5+, Safari 3.1+ et Opera 10+. C’est déjà pas mal, mais si on peut ajouter à celà Internet Explorer 4+, Chrome 0.3+ et Opera 9, c’est encore mieux.

De plus, certains navigateurs mobiles sont susceptibles de supporter ce traitement, comme l’iPhone, par exemple.

Le format Embedded OpenType

Le format EOT est exclusivement supporté par Internet Explorer. Pour embarquer des polices avec IE, nous verrons comment convertir un TrueType en Embedded OpenType.

Le format Scalable Vector Graphics

Les fontes SVG vont nous permetre de supporter Chrome 0.3+ ainsi que Opera 9.

Il nous faudra également faire une conversion du format TrueType vers SVG.

Le WOFF

Dernier format apparu et s’annonçant intéressant: le Web Open Font Format (WOOF). Il n’est pour le moment supporté que par Firefox 3.6 et supérieur.

Ses avantages sont qu’il est compressé (sans perte) et qu’il contient des metadatas sur la provenance de la fonte.

Conversion de format

Si vous avez un format OTF, vous devrez avant tout le convertir en TTF, avant de le convertir à son tour en EOT. Pour cela, FontForge est l’application la plus adaptée, mais son utilisation étant relativement alambiquée, je détaillerai la procédure dans une prochaine mise à jour.

TTF vers EOT

Pour convertir notre TrueType vers un Embedded OpenType, nous utiliserons ttf2eot.

Dans la page des téléchargements, récupérez la package qui correspond à votre système et décompressez le dans un dossier.

Déposez y également votre fichier TTF (ici blox.ttf, pour l’exemple), puis entrez la ligne de commande suivante:

ttf2eot.exe blox.ttf blox.eot

TTF vers SVG

Maintenant, rendez-vous sur Batik récupérer les outils nécessaires pour convertir le TTF en SVG.

Dans la section téléchargements, récupérez le package qui correspond à votre système et votre environnement Java, décompressez-le dans un répertoire avec le fichier TTF, puis entrez la ligne de commande suivante:

java -jar batik-ttf2svg.jar ./blox.ttf -o blox.svg -id blox

Le dernier paramètre -id blox est indispensable pour attribuer un ID à votre police, qui sera ensuite utilisé dans le CSS.

Le fichier créé sera probablement volumineux, comparé au fichier TTF de départ. Il n’est pas rare d’obtenir un fichier dépassant 200Ko, ce qui est inconcevable pour l’optimisation d’un site. Il va falloir optimiser le fichier.

En ouvrant le fichier avec un éditeur de texte, on repère rapidement les caractères et le code qui s’y rattache. Le but et de supprimer toutes les glyphes dont vous n’aurez pas besoin, et ainsi alléger le fichier final de plusieurs dizaines de Ko.

TTF vers WOFF

Après avoir récupéré sfnt2woff.exe, tapez la ligne de commande suivante:

sfnt2woff.exe chemin/vers/fichier.ttf

Vous obtiendrez ainsi votre fichier WOFF, prêt à intégrer.

Intégration

Maintenant que nous avons nos trois fichiers sous la main (TTF ou OTF, EOT, SVG et WOFF), nous allons poser un petit paragraphe sur une page html:

<p>Cras adipiscing nisi vel leo commodo eu tincidunt risus tincidunt. Morbi hendrerit tempus mollis. Nulla id magna sed nunc sagittis convallis.</p>

puis déclarer notre nouvelle police dans le CSS:

@font-face {
    font-family: 'blox';
    src: url("blox.eot");/* Internet Explorer */
    src: local('blox'),
       url("blox.woff") format('woff'),/* Firefox 3.6+ */
       url("blox.ttf") format('truetype'),/* Firefox / Safari / OPERA 10 */
       url("blox.svg#blox") format('svg');/* Opera 9 / Chrome 0.3+ */
}

p {
	font-family: blox, "une fonte alternative";
}

Notez l’ancre ID derrière le nom de la fonte SVG. Elle correspond à l’ID que nous avons défini lors de la conversion. En cas de doute, ouvrez le fichier SVG, l’une des premières lignes devrait mentionner un ID. Par exemple:

<font id="blox" ...>

Le src:local(‘…’) indique le nom de police à rechercher sur la machine de l’internaute. Si elle est présente, il n’aura pas besoin de la télécharger à nouveau.

Complément

Bugs rencontrés

Safari et Chrome ne semblent pas prendre en compte la définition font-style.
Il est alors préférable de définir une nouvelle police pour utiliser de l’italic.

text-transform: uppercase; semble poser problème avec Opera si les glyphes en minuscule sont supprimés.

Déclarer le format TTF après le SVG provoque des bugs d’affichage sous Opera et Safari.
Après plusieurs tests, il est préférable de déclarer les formats dans l’ordre suivant: WOFF, TTF puis SVG).

Pour conclure

Contrairement aux méthodes de remplacement par image, cette technique permet de conserver vos fontes personnalisées jusque sur le papier. Ainsi, en imprimant une page de votre site web, vous garderez exactement la même typographie.

Comme nous l’avons vu, utiliser @font-face permet de couvrir une bonne partie des navigateurs avec des résultats très satisfaisants.
Même si quelques bugs mineurs subsistent, cette méthode est, à mon sens, la plus appropriée, que ce soit d’un point de vue web designer ou utilisateur et elle le sera d’autant plus si le format WOFF tend à se généraliser.