Session 2 • Module 8 • 10 min

Optimisation des Polices

font-display, formats, preload

1) Impact des polices sur la performance

Les polices web peuvent impacter significativement le temps de chargement et l'expérience utilisateur. Une police mal optimisée peut causer :

FOIT (Flash of Invisible Text) : texte invisible pendant le chargement
FOUT (Flash of Unstyled Text) : texte en police système puis switch brutal
CLS : décalage de mise en page quand la police change
Requêtes bloquantes vers des serveurs externes (Google Fonts)

📊

Une police Google Fonts typique ajoute 2-4 requêtes HTTP et 50-150 Ko de données. Sur mobile avec connexion lente, c'est significatif.

2) font-display : contrôler le comportement

La propriété CSS font-display contrôle comment le navigateur affiche le texte pendant le chargement de la police :

Valeur	Comportement	Usage
`swap`	Texte visible immédiatement en fallback, puis swap	Recommandé
`fallback`	Courte période invisible (100ms), puis fallback définitif	Bon compromis
`optional`	Police utilisée seulement si déjà en cache	Performance maximale
`block`	Texte invisible jusqu'à 3s	À éviter

 `@font-face {<br>  font-family: 'Ma Police';<br>  src: url('police.woff2') format('woff2');<br>  font-display: swap;<br>}` 

Comportement de font-display: swap

monsite.fr

Bienvenue sur mon site

Police système (Arial)

Ta police custom

📥 Téléchargement de la police... ✓ Chargée !

3) Formats de polices

Tous les formats ne se valent pas en termes de compression :

WOFF2 30% plus léger, supporté partout

WOFF Fallback pour vieux navigateurs

TTF/OTF Non compressé, à éviter sur le web

En 2024, WOFF2 est supporté par 98%+ des navigateurs. Tu peux utiliser uniquement WOFF2 dans la plupart des cas.

4) Limiter les polices

Chaque variation de police (graisse, style) est un fichier séparé à télécharger. Limite au strict nécessaire :

1-2 familles maximum : une pour les titres, une pour le corps (ou une seule)
2-3 graisses : Regular (400), Medium/SemiBold (500-600), Bold (700)
Éviter l'italique si tu ne l'utilises pas vraiment
Variable fonts : une seule police contient toutes les graisses

Polices classiques vs Variable Fonts

Classique 6 fichiers séparés

📄 Inter-Light.woff2 24 Ko

📄 Inter-Regular.woff2 25 Ko

📄 Inter-Medium.woff2 25 Ko

📄 Inter-SemiBold.woff2 25 Ko

📄 Inter-Bold.woff2 25 Ko

📄 Inter-ExtraBold.woff2 26 Ko

Total : ~150 Ko 6 requêtes HTTP

Variable 1 seul fichier

📦 Inter-Variable.woff2 ~100 Ko

Aa Aa Aa Aa Aa Aa

Toutes les graisses incluses (et toutes celles entre !)

Total : ~100 Ko 1 requête HTTP

Polices variables populaires : Inter Roboto Flex Source Sans 3 Open Sans Montserrat

5) Self-hosting vs Google Fonts

Google Fonts est pratique mais a des inconvénients performance :

Google Fonts

Connexion DNS + TCP + TLS vers fonts.googleapis.com
Puis connexion vers fonts.gstatic.com
Pas de contrôle sur le cache
RGPD : données envoyées à Google

Self-hosting

Même domaine = pas de connexion supplémentaire
Cache contrôlé (immutable possible)
Pas de données externes
Subsetting possible

Comment self-hoster

Télécharger les polices depuis google-webfonts-helper ou Fontsource
Placer les fichiers .woff2 dans ton dossier /fonts
Déclarer avec @font-face dans ton CSS
Ajouter font-display: swap

6) Preload et optimisations avancées

Pour les polices critiques (celle du titre principal, par exemple), le preload indique au navigateur de les charger en priorité :

 <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin> 

Important : l'attribut crossorigin est obligatoire pour les polices, même en self-hosting. Sans lui, la police sera téléchargée deux fois.

Subsetting

Le subsetting consiste à ne garder que les caractères utilisés. Une police complète contient souvent le cyrillique, le grec, des symboles... Si ton site est en français, tu n'as besoin que des caractères latins.

Font Squirrel Generator : subsetting en ligne
fonttools (pyftsubset) : outil CLI puissant
google-webfonts-helper : propose des subsets prédéfinis

💡

Un subset "latin" réduit souvent la taille de 50-70% par rapport à une police complète avec tous les caractères Unicode.

7) Bonnes pratiques en résumé

Quelques règles simples pour éviter les erreurs classiques et charger tes polices efficacement :

Charger depuis le HTML, pas le CSS

Si tu déclares ta police dans un fichier CSS externe, le navigateur doit d'abord télécharger le CSS avant de savoir qu'il a besoin de la police. Ça crée une chaîne de requêtes :

HTML → style.css → @font-face → police.woff2

Pour les polices critiques, préfère le preload directement dans le <head> du HTML. Le navigateur commence le téléchargement immédiatement, en parallèle du CSS.

Éviter les chaînes d'import CSS

Attention aux @import dans tes fichiers CSS ! Un @import dans un CSS qui lui-même est importé par un autre CSS = 3 requêtes séquentielles avant d'arriver à ta police.

Règle d'or : garde tes @font-face dans ton CSS principal ou dans un fichier CSS chargé directement depuis le HTML (pas via @import).

Checklist rapide

WOFF2 uniquement : le format le plus léger, supporté partout
font-display: swap : texte visible immédiatement
Preload les polices critiques : celles au-dessus de la ligne de flottaison
Self-host : évite les connexions externes à Google Fonts
Subset latin : retire les caractères inutiles (cyrillique, grec...)
1-2 familles, 2-3 graisses max : chaque fichier compte
Variable fonts si dispo : un fichier = toutes les graisses

🎯

L'objectif : que ta police soit chargée avant le premier rendu, ou au moins que le texte reste lisible pendant le chargement. Pas de texte invisible, pas de flash brutal.

Question 1/4

Que signifie FOUT (Flash of Unstyled Text) ?

FOUT = le texte s'affiche d'abord en police systeme, puis change brutalement quand la police web est chargee.