Définition
Les polices web personnalisees sont souvent des ressources render-blocking qui retardent l'affichage du texte. Sans optimisation, le navigateur peut afficher un flash de texte invisible (FOIT) ou un flash de texte non style (FOUT) pendant le chargement de la font. Pour le SEO, l'optimisation des fonts impacte le LCP et le CLS. Les techniques incluent : font-display: swap (afficher le texte immediatement avec une font systeme, puis basculer), preloading des fonts critiques, utilisation du format WOFF2 (30% plus leger que WOFF), subsetting (ne charger que les caracteres utilises), hebergement local des fonts (eviter Google Fonts externe pour le RGPD et la performance), et limitation du nombre de variantes (poids, style). La technique optimale est de precharger 1-2 fonts critiques en WOFF2, utiliser font-display: swap et charger les variantes supplementaires de maniere asynchrone.
Points clés à retenir
- Utiliser font-display: swap pour un affichage immediat du texte
- Precharger les fonts critiques avec <link rel='preload' as='font'>
- WOFF2 est le format optimal (30% plus leger que WOFF)
Exemples concrets
Font-display swap
Un site ajoute font-display: swap a ses @font-face. Le texte s'affiche immediatement avec une font systeme, puis bascule vers la custom font une fois chargee. Le FCP s'ameliore de 400ms.
Subsetting de Google Fonts
Un site francais utilisant Roboto ajoute &subset=latin et &text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 pour ne charger que les caracteres necessaires. Le poids de la font passe de 150KB a 20KB.
Questions fréquentes
L'hebergement local est recommande pour la performance (pas de connexion tierce) et la conformite RGPD (pas de requete vers les serveurs Google). Telechargez les fonts depuis google-webfonts-helper et servez-les depuis votre domaine.
Limitez-vous a 2-3 familles de polices maximum et 2-4 variantes par famille (regular, bold, et eventuellement italic). Chaque variante ajoute une requete reseau et du poids. Au-dela, l'impact sur les performances devient significatif.
Termes liés
Aller plus loin avec LemmiLink
Découvrez comment LemmiLink peut vous aider à mettre en pratique ces concepts SEO.
Dernière mise à jour : 2026-02-07