Polices web : les bases

Alexandre Niveau
GREYC — Université de Caen
durée: ~35 minutes ?
TODO: update lien Dvorak + image 

Polices sur les pages web

  • Propriété CSS pour changer la police : font-family: Arial
  • Le navigateur cherche une police installée sur le système qui porte le même nom
  • Problème : tous les systèmes n'ont pas les mêmes polices installées…
  • Si on ne mettait qu'une seule police, on ne pourrait vraiment utiliser que celles qui sont présentes « partout » (Arial, Georgia, Times, Trebuchet, Verdana, Comic Sans…)

Font stack

  • Heureusement, font-family permet de spécifier plusieurs polices
    p {
      font-family: "Ma Police", Arial, sans-serif;
    }
  • Le navigateur essaie toutes les polices dans l'ordre, et s'arrête à la première qui convient (on parle de font stack, «pile de polices»)
  • La dernière option doit être une des cinq polices génériques (fallback fonts) :
    • serif (avec empattements)
    • sans-serif (sans empattements)
    • monospace (chaque caractère a la même largeur)
    • cursive (écriture manuscrite)
    • fantasy (décorative, notamment pour les titres)
    (article sur les types de police)

Webfonts

  • Grâce à la font stack, on peut préciser la police que l'on veut vraiment, ainsi qu'une série d'alternatives, pour couvrir le maximum de systèmes
  • C'est déjà pas mal… mais notre page n'aura pas son « véritable aspect » partout, et il faut faire attention à choisir des alternatives qui se ressemblent
  • Jusqu'au début des années 2010, on n'utilisait donc en pratique que les polices présentes « partout » (web-safe fonts)
  • À présent, il est possible d'utiliser des centaines de polices
  • Les polices utilisées sur la page sont téléchargées en même temps que les autres éléments de la page

Font-face

  • Pour utiliser une police non standard dans une feuille de style, il faut la déclarer avec @font-face
  • @font-face {
       font-family: "Ma police";
       src: url("AdresseDuFichier.woff");
    }
  • Dans la déclaration, font-family sert à donner un nom à la police : c'est vous qui décidez. Remarque : les guillemets ne sont pas nécessaires si le nom ne contient pas d'espaces ou autres caractères spéciaux
  • NB : la règle spéciale @font-face ne sert que pour la déclaration des polices : la police de la page ne change pas !
  • Vous pouvez ensuite utiliser le nom choisi dans vos règles CSS, à la place des noms de polices existantes.
    p {
      font-family: "Ma police", Arial, sans-serif;
    }
  • Attention, il faut quand même préciser des fallbacks : on ne sait jamais ce qui peut se passer (problèmes de téléchargement, utilisation de webfonts désactivée…)

Les formats de police

  • @font-face est standard depuis 1998 !
  • Il n'était pas utilisé car les navigateurs ne se sont mis d'accord sur un format de fichier qu'en 2009
  • Les différents formats :
    • EOT (embedded open type) : utilisé seulement par IE
    • TTF et OTF (true type font et open type font) : formats courants hors du web, mais n'étaient pas bien supportés par IE
    • SVG (scalable vector graphic) : format d'image vectorielle standard du W3C, ne marchait pas avec IE et Firefox… mais le seul qui marchait avec iOS < 4
    • WOFF (web open font format) : le format ouvert et standard validé par tous les navigateurs
    • WOFF2 : meilleure compression que WOFF, quasiment supporté partout

Quel format choisir ?

En fait, il est possible de servir la police sous différents formats, pour sûr·e que tous les navigateurs sont couverts…

Mais le plus simple est de n'utiliser que WOFF, qui est très bien supporté : quasiment tous les navigateurs actuels (desktop et mobile) le reconnaissent

Le site sera un peu moins beau sur les quelques navigateurs non supportés, mais ce n'est pas très grave

notion de graceful degradation

En pratique…

  • Le site FontSquirrel propose un générateur de webfont : on lui fournit un fichier TTF ou OTF, et il construit les fichiers dans les autres formats et génère même le CSS
  • Il propose également une grande sélection de polices utilisables gratuitement sur le web
  • Une autre ressource très utilisée : Google Fonts — ils fournissent un fichier CSS qui charge les polices choisies directement depuis leur serveur
    • Avantage : votre serveur travaille moins (+ de bande passante disponible)
    • Inconvénients :
      • vous êtes dépendants de Google, qui peut décider à tout moment de retirer une police ou de modifier son service
      • Google peut observer les déplacements des internautes sur votre site