Du bon usage de Google Font Directory

Cas pratique

Xavier Brusselaers Consultant IT

www.zoyo.be

zoyo – CC by-nc-nd 2.0 / 2010 – Xavier Brusselaers p. 2/6 www.zoyo.be (Consulting, audit, SaaS)

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. 3/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=Dancin g+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('DancingScrip t'), url('http://themes.googleusercontent.com/font?kit=D K0eTGXiZjN6yA8zAEyM2S5FJMZltoAAwO2fP7iHu2o') 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+Fel l+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. 4/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 */ <balise> { font-family: Georgia, Times, serif; font-size: 1em; }

/* après */ <balise> { font-family: "Gruppo", Georgia, Times, 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. 5/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('DancingScrip t'), url('http://localhost/DancingScript-Regular.ttf') format('truetype'); } body { font: 1.2em Georgia, Times, serif; } .Dancing { font: 1.6em "Dancing Script", Georgia, T imes, 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. 6/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é.