Vous chargez vos polices de la mauvaise manière (et cela nuit aux performances)

• Les webfonts sont un élément visuel des sites web : elles façonnent la marque et l’expérience utilisateur, tout en ayant un impact direct sur les performances et l’accessibilité
• Une mauvaise stratégie de chargement des polices provoque des problèmes de FOUT (flash de texte non stylé) ou de FOIT (flash de texte invisible), ce qui nuit aux Core Web Vitals
• Le format WOFF2 est un format de police moderne et efficace, pris en charge par la plupart des navigateurs récents ; supprimer les formats legacy inutiles améliore les performances
• Les stratégies de subsettting des polices et de preload sont essentielles pour réduire les transferts de données inutiles et accélérer le chargement des pages
• En utilisant une pile de polices système et des descripteurs CSS, on peut minimiser les décalages de mise en page (CLS) lors du chargement des polices et offrir une expérience plus stable

---

Brève histoire des webfonts

Les webfonts sont un élément central du web design et de l’expérience utilisateur, mais malgré leur importance, beaucoup les utilisent encore de manière inadaptée. Voici un résumé de leur évolution.

• L’époque des « web safe »

  • Au début du web, seules des polices web safe comme Arial ou Times New Roman pouvaient être utilisées, et les polices personnalisées étaient remplacées par des images
  • Le rendu des polices variait selon les navigateurs, ce qui compliquait la cohérence visuelle

• Les hacks d’avant @font-face : sIFR et Cufón

  • sIFR : utilisait Flash pour rendre le texte dynamiquement, mais c’était lourd et peu compatible avec l’accessibilité
  • Cufón : convertissait les polices en graphiques vectoriels via JavaScript avant de les injecter, mais cela restait lent et posait toujours des problèmes d’accessibilité

• L’arrivée de @font-face

  • @font-face a permis d’intégrer des polices personnalisées en CSS, mais chaque navigateur demandait des formats différents (EOT, polices SVG, TTF/OTF), ce qui rendait l’ensemble complexe
  • Les problèmes de licence et le piratage des polices étaient très répandus

• Les services commerciaux : Typekit et autres

  • Typekit (aujourd’hui Adobe Fonts) a résolu les problèmes de licence et de compatibilité avec un service par abonnement, fournissant les polices via un snippet JavaScript
  • Cette dépendance à des scripts tiers perdure encore aujourd’hui

• Hacks de compatibilité et contournements

  • Il fallait héberger plusieurs formats ou ajouter des correctifs JavaScript pour gérer FOUT et FOIT
  • Certains ont tenté de pallier le manque de glyphes via des polices d’icônes

• Google Fonts et l’essor des « polices gratuites »

  • Google Fonts a facilité le chargement des polices grâce à des polices sous licence ouverte et gratuites, mais a aussi créé de nouveaux problèmes, notamment des risques de violation du RGPD et des temps de chargement plus lents
  • Contrairement aux polices commerciales, souvent plus difficiles à optimiser à cause des restrictions de licence, Google Fonts permettait un usage plus libre

Fonctionnement des polices (bases)

Une police n’est pas un simple réglage CSS : c’est un composant complexe, profondément impliqué dans le pipeline de rendu du navigateur.

• Formats : de TTF à WOFF2

  • TTF/OTF : formats lourds, pensés d’abord pour le desktop
  • WOFF2 : format de webfont moderne et efficace utilisant la compression Brotli, adapté à la plupart des projets

• Pipeline de rendu

  • Le chargement d’une police passe par les étapes de registration, résolution des styles, appariement de police, couverture des glyphes, requête, affichage, puis décodage et shaping
  • Le paramètre font-display (swap, block, fallback, optional) détermine la façon dont le texte s’affiche

• Métriques

  • Des métriques comme ascent, descent et line gap définissent la hauteur et l’espacement d’une police
  • Lors du remplacement d’une police, un décalage de mise en page (CLS) peut survenir en cas de désaccord entre les métriques

• Styles synthétiques

  • Si le navigateur ne trouve pas la graisse ou le style demandé, il peut générer un faux gras ou un faux italique, ce qui dégrade la qualité
  • font-synthesis: none; permet d’empêcher cette génération artificielle

• Couverture des glyphes

  • Une police ne contient pas tous les caractères ; les glyphes manquants sont rendus via une police de secours, ce qui peut nuire à la cohérence
  • unicode-range permet de ne charger que les glyphes nécessaires

Bases de performance et de stratégie

Les polices influencent le critical rendering path et une mauvaise gestion peut fortement dégrader les performances.

• Taille des fichiers

  • Une seule famille de polices peut atteindre 800 Ko, avec beaucoup de données gaspillées à cause de glyphes inutiles
  • Le subsettting permet d’envoyer uniquement les glyphes nécessaires et d’optimiser la taille

• Décalage de mise en page

  • Le CLS provient des différences de métriques entre police de secours et police personnalisée
  • Des descripteurs CSS comme size-adjust ou ascent-override permettent de stabiliser la mise en page

• Descripteurs CSS modernes

  • font-display: swap; affiche immédiatement une police de secours et offre un rendu plus stable
  • unicode-range permet de ne charger que les glyphes nécessaires à un script précis

Polices variables : la promesse face à la réalité

Les polices variables peuvent améliorer l’efficacité en regroupant plusieurs styles et graisses dans un seul fichier.

• La promesse

  • Fusionner plusieurs fichiers statiques dans un fichier unique
  • Permettre une typographie responsive ajustable dynamiquement selon la taille du viewport

• La réalité

  • Si peu de graisses sont nécessaires, une police variable peut s’avérer plus lourde
  • La prise en charge navigateur reste limitée sur certains axes, et des problèmes de licence peuvent apparaître

• Stratégie de performance

  • Ne conserver que les axes nécessaires et optimiser la taille avec un subsettting par script
  • Vérifier si les gains sont réels par rapport à des polices statiques

• Exemple d’utilisation des axes d’une police variable en CSS

  @font-face {  
    font-family: "Acme Variable";  
    src: url("/fonts/acme-variable.woff2") format("woff2-variations");  
    font-weight: 100 900;  
    font-display: swap;  
  }  
  h1 {  
    font-family: "Acme Variable", system-ui, sans-serif;  
    font-weight: 700;  
  }  
  

Pile système et CDN

Utiliser une pile de polices système sans police personnalisée permet un chargement immédiat et une expérience familière.

• Pile de polices système

  • Une pile composée de polices comme -apple-system et Segoe UI garantit une bonne cohérence sur toutes les plateformes
  • Pour le rendu des emojis, les polices système offrent de meilleures performances

• CDN et hébergement tiers

  • Google Fonts peut exposer à des risques de violation du RGPD à cause de fuites de données
  • L’auto-hébergement permet de réduire les délais liés aux requêtes DNS et de mieux contrôler le cache

Polices de secours et appariement

Les polices de secours déterminent l’expérience utilisateur avant le chargement de la police personnalisée et doivent donc être soigneusement conçues.

• Concevoir une police de secours

  • Ajuster la x-height et la largeur des caractères pour les rapprocher de la police personnalisée afin de minimiser le CLS
  • Utiliser font-size-adjust pour corriger la taille de la police de secours

• Faire correspondre police personnalisée et police de secours

  • Choisir des polices aux proportions proches et ajuster leurs métriques pour stabiliser la mise en page
  • Tenir compte des différences de rendu selon les plateformes en privilégiant la stabilité et la lisibilité

Preload et stratégies de chargement

La stratégie de diffusion des polices a un impact majeur sur l’expérience utilisateur.

• Résultats du chargement

  • Le FOIT fait disparaître le texte sur les réseaux lents
  • font-display: swap; est une valeur par défaut sûre, qui affiche immédiatement une police de secours

• Preload

  • Utiliser <link rel="preload" as="font"> pour démarrer immédiatement le chargement de la police
  • Des en-têtes CORS corrects et une correspondance exacte des URL sont indispensables

• Early Hints (HTTP 103)

  • Le serveur peut indiquer au navigateur de récupérer les polices avant même la réponse HTML, afin de réduire le temps de chargement
  • Il faut ne signaler que les polices critiques pour éviter de gaspiller de la bande passante

• API de chargement des polices

  • La Font Loading API permet de contrôler finement le chargement des polices sur les sites dynamiques

Formats de fichier : WOFF2, WOFF, TTF et le poids du legacy

WOFF2 est le format le plus efficace pour le web moderne ; dans la plupart des cas, un format unique suffit.

• N’utiliser que WOFF2 pour éliminer les formats inutiles
• Éviter l’embedding en base64, qui nuit au cache

Polices d’icônes : Font Awesome et la grosse erreur

Les polices d’icônes ne sont plus adaptées au web moderne à cause de leurs problèmes d’accessibilité et de performances.

• Les icônes SVG sont plus sémantiques, plus souples et peuvent être stylées en CSS
• Si des polices d’icônes existent encore, il faut prévoir du subsettting et une migration vers SVG

Au-delà du latin : scripts non latins, langues RTL et emojis

Les scripts non latins et les langues RTL exigent un shaping et des métriques plus complexes.

• Lors du subsettting, il faut tenir compte des spécificités de chaque script pour éviter les erreurs de rendu
• Pour les emojis, mieux vaut utiliser les polices système pour gagner en cohérence et en performances

L’avenir des webfonts : standards en évolution et risques modernes

Les nouvelles propriétés CSS, les polices variables et les polices couleur font progresser la typographie web.

• La Font Loading API et les Early Hints aident à résoudre les problèmes de latence dans les SPA
• Il faut considérer les polices comme une infrastructure et faire passer les performances et l’accessibilité en priorité

Outils et audit

Les performances des polices peuvent être mesurées avec des outils comme DevTools, Lighthouse ou Glyphhanger.

• Utiliser des outils de subsettting pour supprimer les glyphes inutiles
• Utiliser Font Style Matcher pour ajuster les métriques des polices de secours

Déclaration pour bien gérer les polices

Les polices ne sont pas de simples éléments décoratifs : elles sont au cœur de l’expérience utilisateur et des performances.

• Priorité au système : commencer par une pile de polices système robuste
• Subsettting intelligent : ne transmettre que les glyphes nécessaires
• WOFF2 uniquement : supprimer les formats legacy
• Respect des scripts globaux : prendre en charge différentes langues et les emojis
• Importance des tests : tester sur différents réseaux et appareils

Les polices doivent être traitées à la fois comme du contenu et comme de la marque, avec une gestion rigoureuse des performances et de l’accessibilité.

[nemorize]

Cufón, ça faisait vraiment une éternité que je n'avais pas entendu ce nom, mdr