Du bon usage

de Google
Font Directory

Cas pratique

Xavier Brusselaers
Consultant IT
www.zoyo.be
 Introduction
Lorsqu’on parle de police de caractère (font) sur le web, les discussions s’emballent et le
sujet passionnant qu’est la mise en page et l’utilisation de polices de caractère spécifiques
devient une discorde commune.
Que l’on soit utilisateur de Linux, MacOS ou de Microsoft dans son système
d’exploitation (et on sous-entend par là du navigateur « lié »), la présence des « fonts » est
différente. Nous pourrions aussi chercher des comparatifs de police plus proches les unes
des autres mais c’est oublier que le rendu sera toujours différent.
Heureusement, ou malheureusement, Google Font Directory (encore en version de test,
« beta ») rétablit la donne grâce à l’utilisation de polices de caractères spécifiques.

zoyo – CC by-nc-nd 2.0 / 2010 – Xavier Brusselaers p. 2/6

www.zoyo.be (Consulting, audit, SaaS)
 Google Font Directory
Google Font Directory propose d’une manière simple l’utilisation de ces polices de
caractères. Voyons comment : l’utilisation d’une CSS externe
<link
href='http://fonts.googleapis.com/css?family=Dancing+Script'
rel='stylesheet' type='text/css'>
Cette CSS externe est très simple, elle ne comprend que quelques
lignes :
@font-face {
font-family: 'Dancing Script';
font-style: normal;
font-weight: normal;
src: local('Dancing Script'), local('DancingScript'),
url('http://themes.googleusercontent.com/font?kit=DK0eTGXiZjN6yA8
zAEyM2S5FJMZltoAAwO2fP7iHu2o') format('truetype');
}
/* presentation de la CSS sous Firefox */
Dans la vulgarisation absolue nous pouvons dire que cette CSS indique une source locale
sur un serveur de Google de la police Dancing Script et que cette police est de type vraie
(« true type format »).
Afin que nous partions sur de bonnes bases, il est bien entendu nécessaire de faire une
référence :
- @font-face : http://www.w3.org/TR/css3-fonts/#the-font-face-rule (en anglais)
Mais n’oublions pas que certains navigateurs, vétustes ou non respectueux des standards,
ne comprennent pas cette mention. Heureusement ces cas commencent à se minimiser.
Toutefois certains bons usages ne sont pas réalisés concrètement par Google Font
Directory.

A ne pas réaliser
Les points suivants ne sont pas diaboliquement néfastes à la création d’un site internet,
mais sont des non recommandations suite à des cas pratiques.
- utiliser la syntaxe Google
Dans tous les cas, il faut utiliser la liaison de la feuille de style Google à votre site
(obligation logique).
<link
href='http://fonts.googleapis.com/css?family=IM+Fell+English'
rel='stylesheet' type='text/css'>

Mais il est recommandé de ne pas utiliser celle-ci.

<balise> { font-family: 'IM Fell English', serif; }
Et pour cause… Si le navigateur ne supporte pas la technologie spécifiée, une police
générique sera utilisée ! Avec pour conséquence un aspect peu professionnel de site.

A faire
Voyons donc maintenant comment intégrer correctement ou le plus positivement Google
Font :
a) je réalise mon site internet SANS Google Font Directory ! En effet, de cette manière je
m’assure que mes styles sont les plus compatibles avec tous les systèmes.

zoyo – CC by-nc-nd 2.0 / 2010 – Xavier Brusselaers p. 3/6

www.zoyo.be (Consulting, audit, SaaS)
 b) j'intègre Google Font Directory dans mon site SANS supprimer les styles mis en place
et en m’assurant que les polices utilisées ne détruisent pas la mise en page.
La feuille de style devrait ressembler à ceci :
/* avant */ /* après */
<balise> { font-family: <balise> { font-family:
Georgia, Times, serif; font- "Gruppo", Georgia, Times,
size: 1em; } serif; font-size: 1em; }

Dans cette optique, si la famille de police Gruppo ne peut être chargée par le navigateur
pour une raison quelconque, ce sera la police Georgia qui la remplacera. Et, étant donné
que nous avons fait notre mise en page avec celle-ci, aucun problème ne peut nous arriver.

zoyo – CC by-nc-nd 2.0 / 2010 – Xavier Brusselaers p. 4/6

www.zoyo.be (Consulting, audit, SaaS)
 Home made
La question à se poser au final est : « suis-je dépendant de Google Font Directory ou puis-
je le réaliser moi-même ? »
Pour ce faire, j’ai téléchargé la police DancingScript-Regular.ttf de Google Font Directory
que j’ai placée dans mon répertoire web,. J’ai ensuite créé une page HTML classique.
Dans cette page (et j’insiste uniquement pour le test), j’insère ma CSS. J’y rajoute donc
par la suite les classes de styles utilisant la police téléchargée.
Nous obtenons ceci :
<style type="text/css" media="all" title="CSS1">
@font-face {
font-family: 'Dancing Script';
font-style: normal;
font-weight: normal;
src: local('Dancing Script'), local('DancingScript'),
url('http://localhost/DancingScript-Regular.ttf')
format('truetype');
}
body { font: 1.2em Georgia, Times, serif; }
.Dancing { font: 1.6em "Dancing Script", Georgia, Times, serif; }
</style>

Bien entendu je rajoute un peu de texte pour avoir du contenu. L’un de ces paragraphes
aura la classe « Dancing », utilisant la police Dancing Script.
Le résultat :

Cela fonctionne…
Donc je ne suis pas dépendant de Google Font Directory. Le cas pratique ici démontre la
facilité d’utilisation de Google Font Directory. Avec un peu de pratique et de bon sens
nous parvenons à d’excellents résultats.

Oui mais…
Nous avons un mauvais élève qui pourtant est très répandu : Microsoft Internet Explorer
8 ! (Afin d’éviter d’auto « troller » le sujet je vais éviter de parler des versions inférieures)
Et pourtant lorsque nous utilisons le Google Font Directory, nous avons bel et bien la
police désirée qui s’affiche. Pourquoi ?
La réponse se trouve chez Google même (et dans les specifications d’Internet Explorer
bien sur) : “When a browser sends a request for a Font API stylesheet (as specified in a
<link> tag in your web page), the Font API serves a stylesheet generated for the specific
user agent making the request. […] After downloading the CSS, the browser downloads
the font in the appropriate format for the browser.”
En gros je dois utiliser les hacks pour pouvoir avoir un rendu correct sur les 2 grands
groupes de navigateurs… Sommes-nous dès lors repartis vers l’utilisation de Google Font
Directory afin d’avoir un rendu correct d’automatisation ? Le pragmatisme dirait oui. Le
codeur non. Si vous êtes capable de le faire, réalisez-le !

zoyo – CC by-nc-nd 2.0 / 2010 – Xavier Brusselaers p. 5/6

www.zoyo.be (Consulting, audit, SaaS)
 En conclusion
La conclusion est simple : utilisons Google Font Directory pour une production immédiate
tout en respectant les 2 principes donnés préalablement. Mais si je dois vraiment peaufiner
mon site, ne pas dépendre d’un géant du net, et aussi m’assurer d’une compatibilité
absolue, j’utiliserai les hacks et les 2 groupes de polices compréhensibles par les
navigateurs.
Je vous invite à lire Six Revisions (http://sixrevisions.com/css/font-face-guide/) (en
anglais) pour approfondir la méthode de compatibilité.

zoyo – CC by-nc-nd 2.0 / 2010 – Xavier Brusselaers p. 6/6

www.zoyo.be (Consulting, audit, SaaS)