Définition
Les polices web personnalisées 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 immédiatement avec une font système, puis basculer), preloading des fonts critiques, utilisation du format WOFF2 (30% plus léger que WOFF), subsetting (ne charger que les caractères utilisés), hébergement local des fonts (éviter 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 supplémentaires de manière asynchrone.
Points clés à retenir
- Utiliser font-display: swap pour un affichage immédiat du texte
- Precharger les fonts critiques avec <link rel='preload' as='font'>
- WOFF2 est le format optimal (30% plus léger que WOFF)
Exemples concrets
Font-display swap
Un site ajouté font-display: swap a ses @font-face. Le texte s'affiche immédiatement avec une font système, puis bascule vers la custom font une fois chargee. Le FCP s'améliore de 400ms.
Subsetting de Google Fonts
Un site français utilisant Roboto ajouté &subset=latin et &text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 pour ne charger que les caractères nécessaires. Le poids de la font passe de 150KB a 20KB.
Questions fréquentes
L'hébergement local est recommandé pour la performance (pas de connexion tierce) et la conformité RGPD (pas de requête 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 éventuellement italic). Chaque variante ajouté une requête réseau et du poids. Au-delà, 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