Google Web Fonts

Google Fonts : de belles polices pour votre site !

Google Fonts est un service permettant d’utiliser sur votre site internet tout un tas de polices (629 à ce jour) hébergées directement sur les serveurs de Google et donc, disponible depuis n’importe où. L’utilisation est simplissime, pas besoin d’être un développeur chevronné. Une solution astucieuse pour s’affranchir des traditionnelles Arial ou Verdana. Même si elle souffre quelques inconvénient, cette solution mérite que l’on s’y intéresse de près.

Avant, c’était pas terrible…

Très longtemps, l’utilisation d’une police de caractères (font en anglais) un peu originale sur un site web était très compliquée, voire impossible. Il fallait en effet que la police utilisée soit installée sur l’ordinateur qui affichait la page web. Ça limitait, en gros, le choix à TimesArial ou Verdana. Ainsi, pendant des années quasiment tous les sites étaient rédigés dans l’une de ces deux dernières polices, la première étant peu adaptée à la lecture sur écran (surtout au début des années 2000, où les résolutions des écrans cathodiques étaient peu élevées et où il fallait penser aux utilisateurs affichant encore des pages web à des résolutions de 800×600 pixels).

Il existait bien sûr des techniques pour égayer un peu les textes. La plus utilisée consistait à créer des images pour les titres. On pouvait ainsi utiliser n’importe quelle police mais avec certains inconvénients évidents : il fallait passer un peu de temps, voire beaucoup sur les gros sites, pour créer tous les titres dans Photoshop (ou tout autre logiciel du même genre) ; les images alourdissaient le chargement des pages, les titres étaient plus difficilement référencés dans les moteurs de recherche ; etc.

Mais ça, c’était avant !

Depuis, de nouvelles solutions ont fait leur apparition. Par exemple, Google Fonts permet d’utiliser tout un tas de polices (629 à ce jour) hébergées directement sur les serveurs de Google, et donc, disponible depuis n’importe où. L’utilisation est simplissime, pas besoin d’être un développeur chevronné !
Il faut tout d’abord se rendre sur le site Google Fonts pour choisir sa police. L’application est très bien faite et permet d’avoir un aperçu de chaque police, à l’aide du texte par défaut « Grumpy wizards make toxic brew for the evil Queen and Jack. » ou en saisissant votre propre texte. On peut aussi comparer les polices entre elles, faire des simulations de mise en page avec titres, intros, paragraphes, etc.

Google Fonts

Une fois votre police choisie, en cliquant sur le bouton « use », on vous explique comment l’intégrer à votre site en 4 étapes simples :

  1. Choisissez les styles que vous souhaitez utiliser (normal, gras, italique…) ;
  2. Choisissez le set de caractères que vous souhaitez utiliser (Latin pour les francophones c’est bien) ;
  3. Une petite ligne de code à ajouter dans le <HEAD> de votre page (dans headers.php si vous utilisez WordPress) ;
  4. Le font-family à ajouter dans votre CSS.

Vous pouvez évidemment utiliser plusieurs polices différentes sur votre site, mais il est déconseillé d’en utiliser plus de deux, autant pour des raisons techniques qu’esthétiques. De trop nombreuses polices sur une même page ralentissent le chargement de la page et visuellement, pour faire simple, c’est pas beau !

Les inconvénients

Cette solution offerte par Google, même si elle parait parfaite à première vue, possède toutefois quelques inconvénients :

  • Le chargement de la police par le visiteur du site augmente sensiblement le temps d’affichage du site. Une petite jauge est d’ailleurs disponible pour chaque police afin d’estimer l’implication sur le temps de chargement.
  • Les polices étant hébergées sur les serveurs de Google, que faire si Google décide se supprimer le service pour une raison ou pour une autre, même si cela reste peu probable ?
  • Le choix reste restreint. Même si plusieurs centaines de polices sont disponibles, une entreprise qui dispose d’une charte graphique, ne retrouvera très certainement pas la police de sa charte dans les polices Google et ne pourra pas harmoniser sa communication print et sa communication web.

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *