Atténuer efficacement les retards de chargement des polices dans le rendu Web

L'intégration de polices personnalisées via @font-face est une pratique courante dans la conception Web, mais cela peut introduire un effet de scintillement là où le le texte s'affiche initialement dans la police système par défaut, puis passe à la police personnalisée une fois terminé. Ce délai indésirable résulte du chargement asynchrone des fichiers de polices.

Chargement préemptif des polices avec "Préchargement"

Pour minimiser ce délai, la solution standard de l'industrie consiste à exploiter l'attribut HTML de préchargement pris en charge par navigateurs modernes. Cet attribut permet au navigateur de donner la priorité au chargement des fichiers de polices avant de restituer le contenu de la page.

En incorporant le préchargement, vous pouvez demander au navigateur de lancer le chargement du fichier de police spécifié de manière asynchrone, lui permettant ainsi d'être prêt pour à utiliser une fois que la page demande le rendu du texte. Le résultat est une transition transparente, où la police personnalisée est appliquée sans aucun délai perceptible.

Par exemple, considérez l'extrait de code suivant :

Ressources supplémentaires pour la maîtrise

Pour plus d'informations sur le sujet, nous vous recommandons d'explorer les ressources suivantes :

• [Puis-je utiliser : link-rel- préchargement](https://caniuse.com/#feat=link-rel-preload)
• [Documentation pour rel=preload - MDN](https://developer.mozilla.org/en-US/docs/Glossary/Prefetch_and_preload)
• [Conseils de préchargement pour les polices Web - Bram Stein](https://bramstein.com/blog/ 2013/01/14/preload-hint-web-fonts/)