Nos dossiers

Polices Web et Google Fonts

Le choix d'une police pour la réalisation d'une identité graphique est trop souvent restreint par sa compatibilité avec l'ensemble des navigateurs web. Ce dossier vous présente les contraintes rencontrées par les développeurs de sites internet, et les nouvelles possibilités offertes par les polices offertes par Google.

Introduction pour comprendre les contraintes des polices utilisées sur les sites internet

Votre navigateur ne peut afficher les textes d'une page web avec une certaine police de caractères que si celle-ci est installée sur votre ordinateur. Chaque système d'exploitation (Windows, Mac OS, Linux...) dispose par défaut d'un certain nombre de polices, mais pas forcément des mêmes !

Ainsi, si l'on veut que tous les internautes visualisent un site web avec la même police, il faut se contenter d'une liste assez restreinte dite des "polices web". Il s'agit des polices communes à la majorité des internautes:

Avec empattement (définition)

  • Times New Roman
  • Georgia

Sans empattement

  • Arial
  • Trebuchet MS
  • Lucida Sans
  • Tahoma
  • Verdana
  • Impact

Chasse fixe (définition)

  • Courier New
  • Monaco

Si le site web n'en précise aucune, la plupart des navigateurs affichent par défaut du "Times New Roman", ce qui peut conférer un côté "site amateur" assez déplaisant.

L'immense majorité des sites s'affichent en arial (google, bing, yahoo...) ou en verdana.

Quelles alternatives pour proposer une autre police ?

Enregistrer le texte en image

L'astuce couramment utilisée pour utiliser malgré tout une police "non web" est de pré-calculer le rendu du texte depuis un ordinateur sur lequel la police est installée, puis de l'enregistrer en tant qu'image. Le site web affiche ainsi une image contenant uniquement du texte avec la bonne police sans que l'internaute ne s'aperçoive qu'il s'agit d'une image.

Avantages :

  • Pas de police à télécharger ou installer
  • Fonctionne sur tous les navigateurs (le texte alternatif de l'image sera lu le cas échéant)

Inconvénients :

  • Images beaucoup plus longues à télécharger que du simple texte.
  • Nécessite de refaire l'image si l'on souhaite modifier le texte ou sa mise en forme (couleur, taille...)
  • En cas de site en plusieurs langues, nécessite autant d'images que de langues

Pour cette raison, la plupart des sites ne s'autorisent cette ruse que sur certains textes "clés", comme les titres ou les boutons, et laissent le reste des textes dans une police web.

On reconnait ces textes en image car il est impossible d'en sélectionner un mot à l'aide de la souris. Faites le test ci-dessous !

Exemple d'image en Comic Sans MS

Héberger la police en ligne

Depuis l'apparition des navigateurs modernes, la directive css "@font-face" permet de spécifier l'url à laquelle une nouvelle police doit être téléchargée. Il faut pour cela héberger la police sur votre serveur web. Différents formats de polices sont supportés : ttf, woff etc...

Supposont que la police "shadowsintolight.woff" soit hébergée dans le dossier "fonts" de votre site web. Voici le code à insérer en haut de votre fichier css :

@font-face { 

  font-family: 'Shadows Into Light';
  font-style: normal;
  font-weight: normal;
  src: local('Shadows Into Light'), local('ShadowsIntoLight'), url('/fonts/shadowsintolight.woff') format('woff');
}

Avantages :

  • Fonctionne sur tous les navigateurs modernes (une police alternative sera affichée le cas échéant)
  • Maintenance aisée en cas de modification du texte ou de sa mise en forme (taille, couleur...)

Inconvénients :

  • Peut ralentir l'affichage de la première page du site pendant que le navigateur télécharge la police
  • Nécessite d'héberger la police sur son propre serveur web

La solution de Google pour accélérer l'adoption de nouvelles polices

Constatant que la plupart des sites se contentent du sempiternel "arial", Google a tenu à accélérer les choses en mettant à disposition depuis mai 2010 sa plateforme www.google.com/webfonts.

Elle permet de choisir parmi une liste de plus de 300 polices gratuites que l'on peut filtrer selon différents critères :

  • Serif / sans-serif / display / handwriting (avec / sans empattement / affichage / manuscrit)
  • Thickness (graisse)
  • Slant (inclinaison)
  • Width (largeur)

Différents tris sont proposés, comme "trending" (tendance) ou "popularity" (popularité).

Il est même possible de visualiser directement le rendu calculé par votre navigateur. Ainsi vous pourrez visualiser depuis différents navigateurs le texte tel que vos internautes le verront.

Il peut être intéressant de choisir deux polices :

  • Une en "display" ou "Sans-Serif" pour vos titres, que vous testerez en taille 24px
  • Une "Sans-Serif" différente pour vos contenus que vous testerez en taille "13px"

Pour l'utiliser sur votre site, rien de plus simple, cliquez sur "Quick-Use" à côté de la police choisie (prenons "Ubuntu" pour l'exemple) et suivez les étapes. Il vous sera proposé de copier une simple ligne de code en haut de vos pages html entre <head> et </head> :

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

ou en haut de votre fichier css :

@import url(http://fonts.googleapis.com/css?family=Ubuntu);

La police devient alors utilisable directement dans vos fichiers de style css comme n'importe quelle autre :

body{ font-family: 'Ubuntu', sans-serif; }

Plus besoin d'héberger la police sur votre serveur web, c'est google qui l'héberge sur ses serveurs dans son CDN (définition).

Pour utiliser cette police depuis vos logiciels (Word, Photoshop...), cliquer sur "Add to Collection", "Download your Collection", dézippez, faites un clic droit sur la police et "Installer".

Avantages :

  • Extrêmement simple d'utilisation
  • Gratuit
  • Si l'internaute est déjà passé sur un autre site utilisant la même police google, son navigateur n'aura pas à la re-télécharger

Inconvéniants :

  • En cas de panne des serveurs google, la police alternative (du fichier css ou du navigateur) sera affichée.

Il reste possible de contourner cet inconvéniant en téléchargeant la police et en utilisant la technique du @font-face (cf plus haut).

L'avis d'expert de notre Agence Web Conseil

Nous saluons sans réserve cette excellente initiative de la part de Google ! Nos graphistes sauront vous proposer une police en haromonie avec votre site web. Il l'intègreront directement dans votre charte graphique et vos maquettes lors de la phase de conception graphique.

La question que nous pouvons maintenant nous poser : les polices payantes sauront-elles tirer leur épingle du jeu pour contrer la venue de ces polices gratuites ultra-simples d'utilisation ?

Jean-Marie, Ingénieur de développement 
Agence Web Conseil
Web Agency de Paris