Comment utiliser de nouvelles polices de caractère sur votre site ?

Publié le 20 novembre 2010 - Webdesign. Tags : , ,

S’il est bien un thème qui revenait sans cesse concernant les polices de caractères et la création de site, c’est la difficulté de présenter son contenu texte en se passant des polices standards, reconnues par tous les navigateurs. Jusqu’à il n’y a pas si longtemps, la technique courante consistait à utiliser des images pour afficher une police différente compatible pour tous les visiteurs. Outre le fait que cela alourdissait le temps de chargement des pages, c’était aussi un frein conséquent au référencement : à part utiliser la balise alt, on ne pouvait grosso-modo pas faire grand chose de plus. Aujourd’hui les temps changent, et si l’utilisation de toutes les webfonts n’est toujours pas d’actualité, un grand bond en avant a été fait.

Et parmi toutes les solutions proposées, celle que je trouve la plus intéressante : Google WebFonts. Avec cette API, il n’est plus nécessaire d’héberger les fonts sur ton serveur, il suffit de les appeler directement chez Google. Près de 100 fonts sont actuellement disponibles (certaines même avec des variantes) et un aperçu est même proposé, afin de tester différents paramètres.

Lorsque vous avez choisi une font, incluez-là sur votre site comme une feuille de style traditionnelle, en mettant une source de ce type (ici, la police utilisée est Yanone Kafeesatz) :

http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300,400,700

Il suffit ensuite d’insérer la propriété font-family à l’endroit désiré dans les styles de vos divs et le tour est joué :

font-family: 'Yanone Kaffeesatz', serif;

Le seul petit bémol qu’on pourrait signaler à propos de ce type de manipulation est le possible ralentissement de votre site selon la disponibilité des serveurs chez Google. Mais cela est aussi valable pour les tags Analytics (qui rament assez souvent en passant, et que je conseille de placer en footer, à l’encontre des guidelines Analytics) et même les appels jQuery externes.


Articles sur ce thème :