johanBleuzen

Décidément Google veut que le web évolue, après avoir annoncé son codec vidéo WebM qui est 100% open-source, ils viennent de présenter une API qui permet d'utiliser des fonts pour les designs de sites. Certes des solutions existe déjà mais elle est très simple à mettre en place et le choix des polices devrait prochainement se développer...

Google Font Directory

En effet, Google va dupliquer les services Typekit etFontdeck qui sont présent depuis quelques temps et assez répandus. Google a plutot bien fait les choses avec son API de Font, ils proposent une petite vingtaine de fonts (web safe) et open-source dans des styles différents pour votre site web. Toutes les polices sont visibles sur leur page Google Font Directory.

Ensuite, une fois que vous avez choisi votre font, il suffit d'insérer une balise link tout en haut du header de son site. Par exemple sur mon site, j'utilise la police Cantarell qui est également disponible, j'ai donc ajouté tout en haut de ma page :

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Cantarell" type="text/css" />

Puis il faut modifier le code CSS pour utiliser cette nouvelle police dans le site par exemple sur la balise body pour que ce soit appliqué sur tous les éléments :

cssbody { font-family: 'Cantarell', arial, serif; }

J’obtiens le même résultat qu’auparavant. Mais j’ai considérablement simplifié le code CSS, les polices sont mises en cache, le rendu visuel semble meilleur sous Windows (inchangé sur Mac OS) et les performances se sont améliorées pour ma part. Attention tout de même, il y a certaines considérations techniques à prendre en compte pour insérer ces polices dans votre page.

Google Font API

En plus de fournir des fonts, Google vient de lancer avec les polices un chargeur de polices qui permet d'améliorer le chargement des polices. Les différents navigateurs ne gèrent pas les chargements des polices de la même manière, certains afficher le texte avec une police standard puis une fois que la police est téléchargée l'applique sur le contenu. D'autres navigateurs n'affiche pas le contenu tant que la police n'est pas rapatriée.

Par exemple, si je veux afficher le contenu de mon site avec la police Arial et ensuite avec la police Cantarell une fois qu'elle aura été téléchargée, il suffit d'inclure l'API de Google et d'écrire un petit morceau de JavaScript :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
</script>
<script type="text/javascript">
WebFont.load({
  google: {
		families: ['Cantarell' ]
		}
	});
</script>

Ensuite, il faut ajouter dans votre feuille de style les polices à utiliser tel que :

css .wf-inactive p { // Utilise la police arial quand Cantarell est en téléchargement font-family: arial; } .wf-active p { // Utiliser la police Cantarell quand elle est téléchargée font-family: 'Cantarell', arial; }

Cela peut être pratique, pour éviter le FOUC (Flash Of Unstyled Content) sur les navigateurs ne gérant pas correctement les polices custom. Mais cela permet également d’inclure des polices qui ne sont pas proposées par Google mais par TypeKit par exemple.

Concusion

Pour conclure cet article, c'est une excellente initiative de la part de Google pour répandre l'usage des fonts sur le web. L'amélioration des performances apportés par les serveurs de Google et une gestion avancée du cache des polices pourra diminuer l'impact sur les performances.

D'ailleurs Google précise que les polices sont optimisées pour améliorer le rendu sur les différents navigateurs (choses que j'ai remarqué sur Windows)... J'espère également de voir la liste des polices proposées augmenter au fur et à mesure, par exemple j'aimerai bien y voir la police Steinem que j'utilise et qui est une police libre.

Personnellement j'adopte la solution de Google !