Pourquoi utiliser 'font-display: swap' ?

Introduite dans Google Chrome 72 et Firefox 58, la propriété font-display permet de spécifier la police de téléchargement des fontes personnalisées, l’usage de ces dernières ayant littéralement explosé depuis quelques années avec notamment, Google Fonts.

“Mais pourquoi modifier cette politique d’import des polices ?” me direz-vous. Car, par défaut, elle n’est tout simplement pas optimale pour l’utilisateur !

Politique d’import par défaut

Avant d’évoquer l’intérêt de font-display: swap, il est important d’évoquer le fonctionnement de font-display: auto (valeur par défaut dans les navigateurs) et ses impacts sur le chargement de la page.

font-display: auto indique au navigateur d’utiliser sa propre politique d’importation de polices qui, dans Firefox et Chrome, se traduit par le comportement suivant :

1. le navigateur lance le téléchargement de la police et utilise une fonte transparente pendant ce temps. Cette étape dure au maximum 3 secondes. Bien entendu, si la police est téléchargée avant la fin de ce délai, elle est utilisée.

2. En l’absence de réponse dans les 3 secondes, le navigateur bascule alors sur la police de remplacement. Par exemple, dans le cas d’un font-family: 'Roboto', sans-serif;, le texte s’affichera alors avec la police sans-serif. De même, quand la police sera téléchargée, le texte passera alors la police Roboto.

3. Pas de réponse dans les 30 secondes, on tombe alors sur un TIMEOUT.

Le souci principal de ce scénario est le temps de 3 secondes pour l’affichage du texte, occasionnant une absence de contenu et contraignant l’utilisateur à patienter… Google parle Time to first meaningful paint, c’est-à-dire le temps d’apparation du premier contenu pertinent.

‘Font-display: swap’ à la rescousse

font-display: swap modifie simplement le délai de basculement vers la police de remplacement. Il passe alors de 3 secondes à 100ms ! Un gain de temps appréciable et réduisant ainsi le Time to first meaningful paint. Concernant le délai de récupération de la police personnalisée, aucune condition de temps n’est imposé (hors les 30 secondes relatives de TIMEOUT).

Utilisation en CSS

Rien de plus simple : il faut ajouter la propriété dans le bloc @font-face dans notre feuille de style :

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff")
      format("woff");
  font-display: swap;
}

Via Google Fonts

Encore plus simple ! Depuis mai 2019, il suffit de rajouter ‘&display=swap’ dans l’URL d’import pour obtenir par exemple : https://fonts.googleapis.com/css?family=Roboto**&display=swap**.

Autres valeurs de font-display

font-display: block

Cette option est semblable au fonctionnement par défaut : 3 secondes de fonte invisible avant de basculer sur la police de remplacement, avec le téléchargement en arrière-plan. Son seul intérêt est de s’assurer que nous ayons bien ces 3 secondes; étant donné que tous les navigateurs peuvent avoir une politique auto différente par rapport à celle de Firefox et Chrome.

font-display: fallback

L’option fallback réduit aussi le délai de basculement vers la police de remplacement à 100ms mais, en plus, limite la durée de récupération de la police personnalisée à 3 secondes, là où swap n’impose pas de durée de temps. Elle permet donc de signifier au navigateur d’arrêter la récupération de la police si son téléchargement est trop long.

font-display: optional

Encore plus radical que fallback, elle réduit le délai de basculement à 100ms mais arrête la récupération de la police par la même occasion. Traduction: “si tu as la police sous la main (donc en cache) tu l’utilises, sinon inutile de la récupérer”.

Pour en savoir plus

Pour en apprendre davantage, je ne peux que vous conseiller cette excellente explication par Rob Dodson sur le blog des développeurs de Google.