⚡ Comment charger les polices web sans perdre en vitesse et accélérer le rendu du texte
Lorsqu’un site met 3 secondes à charger, puis passe encore une seconde à redessiner tout le texte, les visiteurs partent. Pas chez la concurrence, ils ferment simplement l’onglet. Le problème est presque toujours le même: des polices web chargées sans tenir compte de la performance.
Selon les données HTTP Archive pour 2025, environ 84% des sites utilisent des polices web personnalisées, et le site médian effectue 5 requêtes vers des fichiers de polices totalisant environ 400 Ko. Sur une connexion médiocre, cela signifie 2 à 3 secondes de blocage du rendu pendant lesquelles les utilisateurs voient un écran blanc. Google prend également en compte le Cumulative Layout Shift dû au remplacement des polices dans les Core Web Vitals.
Les quatre étapes ci-dessous ne relèvent pas de la théorie. Il s’agit du minimum pratique qui résout la grande majorité des problèmes de performance liés aux polices web. Chaque étape prend entre 5 et 15 minutes.
💡 Aperçu rapide:
- Choisissez les formats: le woff2 comme format principal et le woff comme solution de repli suffisent pour tous les navigateurs modernes.
- Ajoutez une précharge pour les polices critiques afin que le navigateur commence le téléchargement immédiatement au lieu d’attendre le CSS.
- Vérifiez votre font-face: local(), ordre correct des src, unicode-range pour les caractères latins.
- Définissez font-display: swap, et les visiteurs voient le texte instantanément même pendant le chargement de la police.
Étape 1: Utilisez woff2 et woff, rien d’autre n’est nécessaire
Il existe de nombreux formats de polices web: EOT, TTF, OTF, SVG. Mais en 2026, vous n’avez vraiment besoin que de deux formats.
woff2 est le standard moderne. Les fichiers sont 30% plus petits que le woff à qualité égale car ils utilisent la compression brotli au lieu de gzip. La prise en charge par les navigateurs inclut tous les navigateurs evergreen, y compris Safari mobile et Samsung Internet. À l’échelle mondiale, cela représente plus de 98% des utilisateurs.
woff est la solution de repli pour une petite fraction de navigateurs plus anciens (Safari sur iOS 11 et versions antérieures, rares environnements d’entreprise). Il est également compressé et fonctionne partout à partir d’IE9+. Placez-le en dernier dans src, et le navigateur prendra woff2 s’il le peut, sinon il se repliera sur woff.
N’utilisez pas EOT (Internet Explorer 8 et versions antérieures) ni TTF (format brut, sans compression) en 2026. La part de ces navigateurs est négligeable, et chaque format supplémentaire dans src augmente la taille du CSS et perturbe le navigateur.
Si vous avez des fichiers en TTF ou OTF, convertissez-les à l’aide d’un générateur en ligne. Transfonter produit du woff2 et du woff en une seule opération, avec un aperçu des glyphes et la taille finale du fichier. Une alternative est le générateur Font Squirrel Webfont Generator.
Étape 2: Préchargez les polices critiques
Le navigateur découvre les polices via le CSS, et il lit le CSS après le HTML. Le temps qu’il y parvienne, 500 à 800 ms se sont écoulées sur une connexion moyenne. La précharge réduit ce délai à zéro: le navigateur commence à télécharger la police dès qu’il rencontre la balise dans le <head>, sans attendre le CSS.
Balise minimale fonctionnelle:
1 <link rel="preload" as="font" 2 href="/fonts/open-sans.woff2" 3 type="font/woff2" 4 crossorigin="anonymous">
La clé est crossorigin="anonymous". Sans cela, le navigateur ignore la police préchargée et la télécharge à nouveau. La raison est que les polices sont récupérées de manière anonyme (CORS), mais une précharge sans crossorigin effectue une requête standard. Le navigateur considère qu’il s’agit de ressources différentes et ne les fait pas correspondre.
Ce qu’il faut précharger. Pas toutes les polices du site. Uniquement celle utilisée pour le texte principal au-dessus de la ligne de flottaison (above the fold): titres, corps de texte, navigation. Le reste peut attendre. Précharger 4 ou 5 fichiers apporte des rendements décroissants et prend de la bande passante au contenu critique.
Remarque importante concernant Google Fonts et les CDN. Si vous utilisez des polices de Google Fonts, les fichiers sont périodiquement mis à jour, et un lien de précharge vers une ancienne version entraînera un double téléchargement (ancienne + nouvelle). Au lieu de précharger les polices de CDN, utilisez <link rel="preconnect"> vers le domaine des polices. Cela accélère la négociation sans risque de décalage de version:
1 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Prefetch pour les polices secondaires. rel="prefetch" indique au navigateur: «cette ressource sera nécessaire plus tard, chargez-la quand le contenu principal est prêt». Convient aux polices des pages internes ou aux polices d’icônes dans le pied de page. La priorité est basse, cela ne prend pas de bande passante.
Un guide moderne sur la priorisation des ressources est disponible dans la documentation web.dev.
Étape 3: Rédigez correctement @font-face
À première vue, @font-face semble simple. En pratique, il comporte quatre aspects subtils, chacun affectant la vitesse.
Exemple de déclaration correcte:
1 @font-face { 2 font-family: 'Open Sans'; 3 font-weight: 400; 4 font-style: normal; 5 font-display: swap; 6 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, 7 U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, 8 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, 9 U+FEFF, U+FFFD; 10 src: local('Open Sans'), 11 url('/fonts/open-sans.woff2') format('woff2'), 12 url('/fonts/open-sans.woff') format('woff'); 13 }
Analyse point par point:
local(): en premier dans src. Si l’utilisateur a déjà la police installée sur son système (Roboto sur Android, Segoe UI sur Windows, San Francisco sur macOS), le navigateur prend la copie locale et télécharge zéro octet. Placez toujours local() en première ligne dans src. Prenez le nom directement du fichier de police: local('Open Sans') et local('Roboto Regular').
Ordre des formats. Le navigateur parcourt src de gauche à droite et prend le premier format qu’il comprend. Par conséquent: local() → woff2 → woff. Pas de EOT/TTF/SVG à la fin, sauf si vous avez un public spécifique avec d’anciens navigateurs, et dans ce cas ils viennent APRÈS woff (pas avant).
unicode-range: chargez uniquement les glyphes dont vous avez besoin. Pour les caractères latins, la plage U+0000-00FF (latin de base + supplément latin-1) est suffisante. Cela représente environ 250 glyphes contre plusieurs milliers dans le jeu complet. La taille réelle du fichier diminue de 3 à 5 fois. Ne surchargez pas la plage: chaque bloc unicode supplémentaire ajoute des glyphes que personne ne verra. Pour les sites en cyrillique, ajoutez U+0400-04FF.
Ordre des blocs @font-face. Si vous avez plusieurs graisses (normal, gras, italique), placez la graisse normale (font-weight: 400) en premier. Le navigateur commencera par télécharger celle-ci.
Étape 4: Activez font-display: swap et dites adieu au FOIT
Le Flash of Invisible Text (FOIT) se produit lorsque le navigateur masque le texte pendant 3 secondes en attendant la police. Les utilisateurs voient une page blanche. Le Flash of Unstyled Text (FOUT) se produit lorsque le texte est immédiatement visible dans une police système, puis remplacé par la police personnalisée. Le second est toujours préférable au premier.
font-display: swap dans @font-face fait exactement cela: le texte s’affiche instantanément dans une police système, et lorsque la police personnalisée se charge, elle est substituée. Idéal pour le corps de texte.
Autres valeurs et quand les utiliser:
swap: pour le corps de texte. Le texte est visible immédiatement, le remplacement est fluide.optional: pour les polices décoratives et les icônes. Le navigateur décide s’il doit ou non télécharger la police. Sur une connexion médiocre, il refusera et conservera la police système. La période d’attente est de 100 ms.block: blocage court (généralement 3 secondes), puis le texte est visible, la police sera substituée une fois chargée. Rarement utilisé.fallback: un compromis. Blocage court, puis le texte est visible, la police sera substituée si elle se charge rapidement.
En pratique, utilisez swap pour le corps de texte et optional pour les polices d’icônes et la décoration. Cela suffit.
Comportement du navigateur sans font-display. Si vous ne spécifiez rien, Chrome masque le texte jusqu’à 3 secondes, Firefox jusqu’à 3 secondes, Safari indéfiniment, et Edge affiche immédiatement la police système. Avec font-display: swap, ce comportement est unifié et le résultat devient prévisible.
Comment vérifier le résultat
Testez votre site avant et après sur web.dev/measure. Lighthouse affichera «Assurez-vous que le texte reste visible pendant le chargement de la police web» comme une ligne distincte. Si l’audit est rouge, votre font-display ne fonctionne pas ou est manquant.
Pour une vérification manuelle: ouvrez DevTools → Réseau, réglez la limitation sur «Slow 3G» et actualisez la page. Le texte doit apparaître instantanément dans une police système, et non après 3 secondes d’écran blanc.
Les captures d’écran ci-dessous montrent la différence entre l’approche standard et l’approche optimisée (test sur Slow 3G):
Comportement par défaut: le texte est masqué jusqu’au chargement de la police
Comportement optimisé: le texte est visible immédiatement dans une police système
La différence est visible à l’œil nu: la première capture montre un écran blanc, la seconde montre un contenu disponible instantanément.
Lors de la conférence performance.now() 2024, Mandy Michael aborde des stratégies avancées: unicode-range incrémental, découpage des polices et travail avec les polices variables. Pour ceux qui souhaitent aller au-delà des quatre étapes de base.
⁉️🤔 Foire aux questions
Pourquoi ai-je besoin de woff si woff2 est pris en charge partout?
Les utilisateurs restants d’anciens Safari iOS (iOS 11 et versions antérieures) et de rares environnements d’entreprise avec des navigateurs verrouillés ne prennent pas en charge woff2. Sans solution de repli en woff, ces utilisateurs verront une police système au lieu de la vôtre. Le woff ajoute 15 à 20 Ko à l’ensemble: un prix négligeable pour couvrir la part restante.
Puis-je simplement utiliser Google Fonts et ne pas m’inquiéter?
Oui, et pour la plupart des sites, c’est la voie optimale. Google Fonts sert automatiquement du woff2 aux navigateurs modernes, utilise un CDN géo-distribué et prend en charge
display=swapcomme paramètre d’URL. Inconvénients: dépendance à un CDN externe (considérations de confidentialité, RGPD), impossibilité de contrôlerunicode-rangeet l’installation locale des polices. Si la confidentialité et le contrôle sont importants, hébergez vos polices vous-même.
Comment savoir si les polices ralentissent réellement mon site?
Lighthouse (l’onglet Audits dans Chrome DevTools) affichera l’audit «Assurez-vous que le texte reste visible pendant le chargement de la police web». WebPageTest fournit un diagramme en cascade avec le timing de chaque requête de police. Si les polices commencent après le premier CSS, la précharge n’est pas configurée. Si le décalage de mise en page est supérieur à 0,1, la police provoque un Cumulative Layout Shift, et Google en tient compte dans les Core Web Vitals.
font-display: swap gâche le design, le texte «saute» lors du remplacement?
Oui, c’est un inconvénient connu de swap. Combattez-le avec deux techniques. Premièrement: définissez
font-sizeetline-heightpour le texte afin qu’ils correspondent à la police système de repli. La différence de métriques sera minime. Deuxièmement: utilisez Font Style Matcher ou la propriétésize-adjustdans@font-face(disponible dans les navigateurs modernes) pour faire correspondre les métriques de la police personnalisée à la police système. Après ajustement, le CLS sera nul.
Dois-je précharger toutes les polices du site?
Non. Préchargez uniquement les polices critiques: celles qui composent le texte au-dessus de la ligne de flottaison (les 1 à 2 premiers écrans). Chargez le reste normalement via le CSS. Précharger plus de 5 polices encombre la bande passante et retarde les ressources plus importantes dans la file d’attente. En pratique, 1 à 2 liens de précharge couvrent la grande majorité des scénarios.
Cela en vaut-il la peine: quatre étapes, quatre minutes
La configuration des polices web n’est pas un projet d’une semaine. La conversion en woff2, la correction de @font-face, la précharge et font-display: swap prennent 20 à 30 minutes de travail, même si vous ne l’avez jamais fait auparavant.
Le bénéfice est mesurable: le texte devient visible 1,5 à 2,5 secondes plus tôt sur une connexion Slow 3G. Les Core Web Vitals ne pénalisent pas le décalage de mise en page. Et les utilisateurs ne partent pas en fixant un écran blanc.
Commencez par une police: la police principale du corps de texte. Appliquez les quatre étapes. Vérifiez Lighthouse avant et après. La différence en chiffres sera plus convaincante que n’importe quel argument.
Une équipe professionnelle de rédacteurs et d'éditeurs spécialisés dans la création de contenu de qualité.