Grâce à un billet du Presse-Citron, j’ai (re)découvert la Google Font API, une application Google Labs que j’avais survolé il y a déjà quelque temps d’un regard morne sans lui trouver d’intérêt particulier. J’avais bien tort, car cette API promet d’utiliser dans une page web des polices de caractères autres que les imputrescibles Arial, Helvetica, Georgia, Verdana, Times New Roman et consoeurs, bref les fameuses Web Safe Fonts qui permettent de faire des jeux de mots à 2 balles mais rendent le web un peu monotone.
Le fonctionnement est le suivant :
Il faut tout d’abord choisir sa police dans le catalogue Google Font Directory, l’onglet « Use this Font » permet de générer la balise link à insérer dans l’en-tête de la page, entre <head> et </head>.
Exemple pour charger la police Vollkorn de base :
?[Copy to clipboard]View Code HTML<link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>
Une fois que c’est fait la police peut être référencée dans les feuilles de style CSS, par exemple :
?[Copy to clipboard]View Code CSSp { font-family: 'Vollkorn', serif; }
Certaines des polices du catalogue (pas toutes) sont disponibles dans plusieurs variantes : normal (regular), italique (italic), gras (bold), gras-italique (bolditalic). Pour utiliser ces variantes dans les styles il faut l’indiquer dans la balise link à la suite du nom de police suivi de « : ». Par exemple pour utiliser toutes les variantes de la police Vollkorn ça sera :
?[Copy to clipboard]View Code HTML<link href='http://fonts.googleapis.com/css?family=Vollkorn:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
On peut charger plusieurs polices avec un seul appel en utlisant le séparateur « | » :
?[Copy to clipboard]View Code HTML<link href='http://fonts.googleapis.com/css?family=Vollkorn:regular,italic,bold,bolditalic|Reenie+Beanie' rel='stylesheet' type='text/css'>
Si le nom de la police comporte des espaces, comme « Reenie Beanie », on remplace l’espace par un « + » dans la balise link.
Voila pour la mise en oeuvre, c’est plutôt fastoche. En complément le site Font Comparer permet de visualiser le rendu à l’écran d’une sélection de polices du catalogue Google Font.
Dans les faits, le rendu de ces polices téléchargées varie pas mal selon le navigateur utilisé. J’ai fait quelques tests de base sur la police Vollkorn, voilà ce que ça donne :
Google Chrome 9 - Linux
Iceweasel (Firefox) 3.6 Linux
Internet Explorer 8 - Windows XP
Après, il faudrait faire plus de tests, peut-être que les problèmes sont dus à la police elle-même, je ne sais pas, en tout cas les résultats sont plus homogènes avec cette bonne vieille Georgia.
Apparemment l’API Google Font génère dynamiquement une règle CSS @font-face, on peut voir ça avec le Service de validation CSS du W3C. Je ne suis pas expert en la matière et je n’ai pas encore fait d’essais avec @font-face et des polices en local, faudrait voir ce que ça raconte.
En résumé je trouve tout ça bien prometteur mais pas tout à fait sec, pour le moment je n’enterre ni Arial ni Georgia, je les garde pour le corps du texte et j’utilise les polices Google Font pour les titres.
Jeu de briques
Snake
Pacman
Bubble