Afficher le texte sans attendre que notre police soit chargée

Fix #7

En ce moment, tant que la police personalisée qu’on utilise sur le site (Fira) n’est pas chargée, le texte n’est pas affiché du tout. C’est dommage, surtout sur les navigateurs mobiles où la police peut prendre du temps à se télécharger.

Ce qu’on voudrait, c’est afficher par défaut la première police disponible – et améliorer dès que la police personalisée est disponible.

En théorie, il y a une propriété CSS qui permet de faire ça simplement : font-display: swap. Malheureusement ce n’est pas encore supporté par les navigateurs.

On utilise donc la technique décrite dans cet article (https://www.bramstein.com/writing/web-font-loading-patterns.html) :

• Par défaut afficher une police de base,
• Lancer le chargement de la police personalisée en Javascript, pour avoir un évènement déclenché lorsque le chargement est terminé,
• À ce moment là, rajouter une classe body.fira-sans-loaded, qui déclenche dans le CSS l’utilisation de notre police.

Pour les gens qui ont déjà visité le site récemment, on affiche même notre police directement, en partant du principe qu’elle doit bien être dans le cache.

Avantages

• Le texte est lisible immédiatement, même sur les connexions lentes.

Inconvénients

• L’observation du chargement des polices nécessite une petite bibliothèque externe en Javascript. Mais c’est petit, genre 1,3 Ko gzippé.
• Il y a aussi quelques lignes de code custom pour la plomberie, qu’il faut maintenir.

Dans l’ensemble je pense que ça les vaut :) Et on pourra passer à font-display quand les navigateurs le supporteront.