Savoir quand toutes les fontes sont chargées

Avec les fontes téléchargées popularisées par Google Fonts, on a vu apparaître des Flashes Of Unstyled Text (variante du FOUC) parce qu'il n'est pas toujours facile ou possible de trouver une fonte de repli qui s'approche suffisamment de la fonte téléchargée souhaitée, et parce que le téléchargement entraine forcément un temps de réponse parfois un peu long 🥱

Heureusement, ces dernières années une nouvelle API a été créée, FontFaceSet, qui permet de savoir quand toutes les fontes sont chargées (ready) ou bien si une fonte particulière est chargée (check)

Voici un exemple pour déclencher une action lorsque toutes les fontes sont chargées. Il utilise une Promise d'ECMAScript 6 donc ça ne fonctionne pas dans IE11 (on peut néanmoins éviter de le faire planter). Ça fonctionne dans Safari 14, mais pas dans Safari 12 (je ne sais pas pour la version 13). Ça fonctionne dans Chrome, Edge, et Firefox à l'heure où j'écris.

J'ai ralenti de 5 secondes (en PHP) le chargement de la fonte "Mochiy Pop P One" qui s'appliquera au deuxième exemplaire du Pangramme ci-dessous :

Description de l'exemple

• Pendant le chargement de la fonte qui prend 5 secondes, on voit la police par défaut du navigateur, en guise de repli. Si c'est du Times, on verra très bien la différence avec Mochiy Pop P One et il y a de fortes chances que ça décale le contenu en-dessous.
• Une alerte "Fontes prêtes !" doit donc s'afficher sur les navigateurs modernes au bout de 5 secondes. Dans un cas réel, au lieu d'afficher une alerte, on pourra gérer ce genre de décalage.
• Sur Safari 12, cette alerte s'affiche immédiatement alors que la fonte n'est pas encore chargée.
• Sur IE11, une alerte "Ça ne fonctionne pas..." s'affiche immédiatement.
• Le rendu final de la ligne n° 2 doit être celui-ci :
  
• Il faut forcer le rechargement complet de la page pour revoir l'exemple, sinon le navigateur prend la fonte dans son cache.