L’écriture sur le web a toujours été limitée par un choix de polices restreintes. Grâce à la magie des CSS, et surtout la règle @font-face, un choix plus grand est aujourd’hui offert. Malheureusement, l’implémentation de cette règle varie en fonction des navigateurs ce qui fait qu’elle était difficile à utiliser.
C’est là qu’arrive Google en nous proposant un annuaire de polices librement utilisables, gérant lui même l’interopérabilité entre les navigateurs et l’hébergement des polices : Google Font Directory.
Pour ajouter une police, il suffit d’ajouter ce code au fichier functions.php de votre thème :
wp_enqueue_style('google-fonts','http://fonts.googleapis.com/css?family=POLICE');
Il faut bien évidemment remplacer POLICE par le nom d’une police proposée sur la galerie (ne pas oublier de remplacer les éventuels espaces par des + dans l’adresse).
Cette méthode, en plus de ne pas utiliser de plugin, à l’avantage d’utiliser la méthode standard d’inclusion de style de WordPress, de ne pas demander de modification profonde de votre thème (fichier header.php, notamment), et dont le placement permet d’être conditionné.
Ensuite, la police importée est utilisable comme toutes les autres :
h1 {
font-family: "Droid Sans",Verdana,Arial,sans-serif;
}
Au passage, n’oubliez pas de fournir des polices alternatives au cas où il y aurait un problème pendant le chargement des polices externes (ou si le navigateur du client ne les supportent tout simplement pas..
Il est possible d’importer plusieurs polices d’un seul coup en remplaçant POLICE par POLICE1|POLICE2, par exemple Lobster|Droid+Sans.
Pour certaines polices, des variantes sont également disponibles, souvent la forme grasse ou italique de la police, qui devient par exemple Lobster:bold.
Plusieurs variantes peuvent également être demandées simultanément, ce qui nous donne par exemple: Lobster:normal,bold.
Et enfin, un mélange d’un peu de tout pour le fichier functions.php :
wp_enqueue_style('google-fonts','http://fonts.googleapis.com/css?family=Lobster|Droid+Sans:normal,bold|Tangerine:bold');
A noter que pour un site classique, il suffit d’utiliser une balise link classique dans le head, ou un @import dans n’importe quelle feuille de style, mais tout cela est expliqué en détail dans la rubrique “Get the code” de chaque police.