Police personnalisée : de cufon à font-face

EDIT 2022 : font-face ou Google Fonts, c’est très bien, mais aujourd’hui je conseille plutôt de se concentrer sur les polices système. Elles ont l’avantage d’être déjà sur la machine de l’internaute, c’est ça de moins à charger ce qui améliore les performances de votre site Internet.

Jusqu’ici, pour afficher une police personnalisée sur un site web, j’utilisais le service Cufon. Très pratique, il suffit de charger votre police dans leur formulaire et vous obtenez en retour un fichier javascript que vous pouvez ensuite utiliser sur votre site. Mais ce matin, en installant Internet Explorer 9, j’ai eu une mauvaise surprise… En effet, la version de cufon que j’utilisais pour le site que vous avez sous les yeux n’était tout simplement pas compatible avec cette nouvelle version d’IE. En lieu et place de mes textes, j’obtenais… rien, rien du tout. Plus rien ne s’affichait. Problématique n’est-ce pas ? Alors certes, la dernière version de Cufon est IE9-compatible, et ce serait rapide de la mettre à jour. Mais dans ma tête ont défilé toutes les intégrations pour lesquelles j’avais utilisé ce service, et qu’il faudra également mettre à jour.

Et là je me suis dit stop ! Passons à une méthode plus pérenne, passons à font-face.

Rapide historique

Par défaut, un navigateur va utiliser les polices d’écriture présentes sur l’ordinateur de l’internaute pour afficher le texte d’un site web. Ce qui explique que nous soyons assez limités en terme de diversité d’écriture, car les polices disponibles sur tous les ordinateurs ne sont qu’une poignée. Il y a encore quelques années, pour rompre la monotonie, nous utilisions des images. Le problème : des sites plus lourds à charger et des textes impossibles à analyser pour les moteurs de recherche.

Puis les scripts tels que Cufon sont apparus. Le principe : vous affichez du vrai texte sur votre site web, et une surcouche javascript passe par dessus pour transformer la police d’écriture. L’inconvénient : le javascript doit être activé sur le navigateur de l’internaute… et il faut régulièrement mettre à jour le script pour assurer sa compatibilité avec les nouvelles versions de navigateurs.

Le tant attendu font-face

Or, depuis quelques années, il existe une règle css censée nous changer la vie : font-face. Elle permet d’afficher une police d’écriture personnalisée que vous aurez préalablement chargée sur votre site web. Par conséquent, au lieu d’aller chercher une police sur l’ordinateur de l’internaute (sans assurance de la trouver), le navigateur va simplement chercher la police sur votre site. Mais cette règle css n’a été implémentée qu’assez récemment sur les navigateurs modernes (tandis qu’Internet Explorer le gère depuis sa version 4.0).

Font-face est disponible depuis :

• Firefox 3.5
• Opera 10
• Safari 3.1
• Chrome 3.0
• Internet Explorer 4

Comment utiliser font-face

A présent que font-face est largement disponible, il est donc possible de l’utiliser ! Comment ? Voici les 3 lignes de code css indispensables :

@font-face {
    font-family: 'Police';
    src: url('police.eot'); // IE
	src:local("Police"),url('police.ttf') format('truetype');
}

Vous aurez remarqué qu’IE nécessite un format de fichier particulier. Les autres navigateurs feront leur affaire avec le format truetype, mais certains vont préférer d’autres formats de police que vous pouvez également fournir de la manière suivante :

url('police.woff') format('woff'),
url('police.svg') format('svg');

Ensuite pour faire appel à cette police, utilisez la méthode traditionnelle :

h1{ font-family:"Police", Arial, sans-serif;}

La question est : où trouver ces formats de fichiers ? Vous pouvez par exemple acheter la police sur le site MyFonts, où vous trouverez ces différents formats dans le zip téléchargeable. Mais si vous avez en votre possession un fichier ttf ou oft, faites un tour sur le site Fontsquirrel, qui met à votre disposition un « @font-face generator », lequel vous fournira les versions converties de votre police.

Je vous conseille également d’aller lire la présentation d’Yves Van Goethem, qui vous apportera quelques informations complémentaires, notamment en terme d’optimisation.