Polices web : les bases

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)

Déclaration d'une police

• Supposons qu'on a un fichier contenant une police, fichier-police.woff (voir plus loin pour les formats de fichiers de police)
• Pour pouvoir utiliser la police correspondante dans le CSS, il faut lui choisir un nom, par exemple Ma police
• on doit déclarer (au début de la feuille de style) que la police Ma police est définie dans le fichier fichier-police.woff
• Cette déclaration se fait avec la règle spéciale @font-face :

@font-face {
   font-family: "Ma police";
   src: url("fichier-police.woff");
}

• Dans la déclaration,
  • font-family indique le nom que vous donnez à 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
  • src indique le chemin vers le fichier de police
• 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 !

Utilisation d'une police déclarée

• Après que la police a été déclarée avec @font-face, vous pouvez utiliser le nom choisi dans vos règles CSS, à la place des noms de polices existantes.

  p {
    font-family: "Ma police", "Arial", sans-serif;
  }

• À part la déclaration, il n'y a aucune différence entre les polices standard et celles que vous avez déclarées vous-mêmes.
• 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

Plusieurs styles pour une même police

• Une bonne police pour le corps du texte doit exister en plusieurs styles, comme le gras ou l'italique
• Il ne suffit pas de grossir le trait ou d'incliner les lettres !
• Un fichier woff ne contient qu'un seul style (soit normal, soit gras, soit italique, soit gras et italique…)
• Il faut déclarer toutes les versions dans le CSS, chacune avec une règle @font-face…
• … et dire au navigateur que tous ces fichiers sont différentes versions d'une même police !

Lier les styles

• Pour cela, il suffit de donner le même nom (font-family) à tous les styles d'une même police, tout en précisant leur style et/ou leur graisse

  @font-face {
      font-family: "DroidSerif";
      src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
      font-weight: normal;
      font-style: normal;
  }
  @font-face {
      font-family: "DroidSerif";
      src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
      font-weight: normal;
      font-style: italic;
  }
  @font-face {
      font-family: "DroidSerif";
      src: url("DroidSerif-Bold-webfont.ttf") format("truetype");
      font-weight: bold;
      font-style: normal;
  }
  @font-face {
      font-family: "DroidSerif";
      src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype");
      font-weight: bold;
      font-style: italic;
  }

• Ces instructions ne modifient pas la police ! Elles servent à expliquer au navigateur de quelles types de police il s'agit.