Comment installer une police de caractère pour votre blog ou site web, en passant par la propriété CCS3 @font-face dans votre feuille de style CSS ? Ce n'est pas trop compliqué. Sans utiliser cette propriété, il y a la méthode Google avec sa super API, mais quid du jour où le géant voudra arrêter ce service (gratuit) qui mange de la bande passante sur ses serveurs ? Il est donc hautement préférable d'avoir ses propres fontes (ou polices de caractères) hébergées directement sur son serveur. De plus, ça permet d'éviter une sortie de redirection supplémentaire, qui plombe toujours un peu les performances de son site.

Mais, si la méthode manuelle n'est pas très répandue, c'est parce que les différents navigateurs ne sont pas tous encore logés à la même enseigne, en ne supportant pas tous les mêmes types de fontes... Internet Explorer est, comme toujours pointé du doigt - juste pour l'exemple. Alors à quand une réelle universalité sur un format de fonte au sein de tous les navigateurs ? Le format woff (Web Open Font Format) créé par Mozilla et validé par le W3C devrait juste devenir aujourd'hui un format normalisé et utilisé par tous les navigateurs du marché, pour télécharger nos polices de caractères. SI, en prime, ils en supportent d'autres, tant mieux...

Pour rappel, même si aujourd'hui, le format .ttf semble bien être le plus répandu, il faut aussi le convertir en Eot (End of Time ?), svg et woff pour faire en sorte que le rendu typographique de son site soit le même à peu près partout. Un vieil article de référence fait le tour des formats de polices typographiques.

Comment fait-on ?

En utilisant la propriété @font-face dans sa feuille de style CSS, afin de déclarer toutes les fontes désirées pour son site, en fonction de leurs styles (gras, italique, normal...), on doit pouvoir s'en sortir un minimum. Mais comme, vous n'avez sûrement que le format ttf sous la main, il faut donc le convertir dans les autres formats pré-cités. Pour cela, il y a au moins deux services web qui font ça. Tout d'abord, l'excellent FontSquirrel, et son générateur. Ensuite, il y a aussi font2web. Ces deux services gratuits proposent également la création d'un fichier CSS adapté. Pour un peu, il n'y a plus qu'à copier. Voici un exemple, avec la police Ubuntu que l'on peut récupérer sur le Font Directory de Google, chez Squirrel, ou bien évidemment et de préférence, sur le site officiel. Une fois les fontes générées, on obtient ce genre de code. Dans cet exemple, on place toutes nos polices de caractères dans le sous-répertoire "fonts".

@font-face {
    font-family: 'ubunturegular';
    src: url('fonts/ubuntu-r-webfont.eot');
    src: url('fonts/ubuntu-r-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ubuntu-r-webfont.woff') format('woff'),
         url('fonts/ubuntu-r-webfont.ttf') format('truetype'),
         url('fonts/ubuntu-r-webfont.svg#ubunturegular') format('svg');
    font-weight:normal;
    font-style:normal;
}

Il ne reste plus qu'à activer nos fontes sur les parties de nos sites, comme les titres, mais il ne faut pas oublier de déclarer une seconde et même une troisième fonte, au cas où le navigateur de l'utilisateur ne les téléchargerait pas. Ce serait dommage que le navigateur utilise une police par défaut.

h1 {font-family: ubunturegular, Georgia, serif;}

Un peu plus loin

En passant, si vous voulez identifier une fonte dans un site web, vous pouvez passer par l'outil whatfont. Je vous propose aussi quelques articles à lire sur les polices de caractère. Enfin, pour trouver de magnifiques fontes libres (ou gratuites), voici une petite sélection de sites qui en proposent.

• OpenfontLibrairy
• fontsquirrel
• dafont
• fontzone

Utiliser des fontes spéciales sur son site, sans l'API de Google est une publication originale sur le blog NeoSting.net
Article sous licence Creative Commons CC-By