Limiter les Webfonts et les Optimiser

L'objectif est de limiter le nombre de fichiers à charger lors de l'ouverture de la page pour réduire le poids total et les émissions du service.

Illustration de différentes polices de caractères (Aa, Bb, Cc).
Photo by Brett Jordan on Unsplash

Objectif : Réduire les requêtes et le poids

Les polices (webfonts) sont hébergées sur un serveur et doivent être téléchargées par le navigateur lors de l'affichage de la page.

Chaque webfont possède plusieurs variantes (ex: standard, light, bold, italic...). Chaque variante est un fichier séparé à télécharger.

Réduire le nombre de polices et de variantes utilisées permet de limiter drastiquement le nombre de fichiers à télécharger et le poids de la page.

Comment faire ?

  • Limiter le nombre : Utiliser 2 polices (webfonts) au maximum si possible (par exemple, une pour les titres, une pour le texte).
  • Utiliser les formats optimisés : Privilégier les formats WOFF2 (meilleure compression) et WOFF, qui sont faits pour le web, plutôt que TTF ou OTF.
  • Utiliser les polices système : Pour une performance maximale, utiliser les polices déjà installées sur le système de l'utilisateur (ex: Arial, Verdana, ou la pile de polices système de votre style.css).
  • S'appuyer sur un Design System : Utiliser les polices définies par le Design System de votre organisation garantit la cohérence et évite d'ajouter de nouvelles polices inutiles.