Personnaliser les polices d’une page web avec @font-face

Il y a deux mois de ça j’avais publié un billet où je m’extasiais presque sur les possibilités de la Google Fonts API. J’avais tort.

Entre temps j’ai lu des articles bien intéressants ici ou là écrits par des gens qui maîtrisent le sujet (des waibdisailleneurs, oui madame) et ils m’ont convaincu que cette API ne sert finalement pas à grand-chose. En gros il s’agit juste d’un bout de code Javascript qui va générer dynamiquement des règles CSS @font-face pour embarquer dans la page des polices hébergées chez Google, donc bien loin de chez nous.

Vu le nombre limité de polices disponibles au catalogue Google Web Fonts, on peut se demander quel est l’intérêt de la chose alors que l’utilisation de @font-face permet d’utiliser quasiment n’importe quelle typo hébergée sur votre serveur, pourvu qu’elle soit libre de droits (le problème des droits est une limitation légale, pas technique, pour le moment il n’y a pas de DRM sur les polices

).

Mise en oeuvre de @font-face

L’utilisation basique de @font-face est la suivante, pour une police TrueType « matypo.ttf » stockée dans le répertoire relatif « monrepertoire » :

@font-face {  
  font-family: matypo ;  
  src: url( monrepertoire/matypo.ttf ) format("truetype");  
}

On peut ensuite l’utiliser comme on le fait habituellement aves les polices standard :

.p { font-family: matypo, verdana, helvetica, sans-serif;  }

Ca fonctionnera avec la quasi totalité des navigateurs récents, à l’exception notable d’Internet Explorer qui ne sait pas gérer les polices TrueType! Il va donc falloir convertir la police au format EOT (Embedded Open Type), pour que sa majesté IE consente à nous l’afficher correctement. Microsoft fournit un outil pour ça, et il y a des convertisseurs en ligne comme celui ci, mais le plus simple reste d’utiliser Squirrel @font-face generator. Ce sympathique outil va non seulement convertir la police dans tous les formats utilisables mais aussi générer le code css @font-face correspondant :

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 25, 2011 */
@font-face {
    font-family: 'matypo';
    src: url('matypo-webfont.eot');
    src: url('matypo-webfont.eot?iefix') format('eot'),
         url('matypo-webfont.woff') format('woff'),
         url('matypo-webfont.ttf') format('truetype'),
         url('matypo-webfont.svg#webfontaPl2NyqY') format('svg');
    font-weight: normal;
    font-style: normal;
}

Comme on peut le voir, le générateur convertit aussi la police aux formats woff et svg (le mode Expert permet de sélectionner les formats). Ça maximise la compatibilité avec l’ensemble des navigateurs mais ça peut aussi ralentir le temps de chargement de la page. Les polices au format svg notamment peuvent être très lourdes, 2 à 3 fois la taille de la police TrueType, et elles ne sont nécessaires que pour un nombre limité d’anciens navigateurs.

Il n’y a plus qu’a ajuster le chemin de stockage de la police pour que ça fonctionne.

Liens

On peut télécharger des polices libres de droits ici ou là
Un bon article sur les différents formats de polices web