Optimiser les polices web (Google Fonts)

Optimiser les polices

Problème

Les polices web (Google Fonts) ajoutent des requêtes externes et peuvent bloquer le rendu (FOIT — Flash of Invisible Text).

Solutions

1. Hébergez les polices localement

Téléchargez les polices et servez-les depuis votre serveur. Élimine la requête vers Google.

2. font-display: swap

@font-face {\n  font-family: 'MaPolice';\n  src: url('police.woff2') format('woff2');\n  font-display: swap;\n}

Le texte s'affiche immédiatement avec une police système, puis bascule quand la police est chargée.

3. Préchargez les polices

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

4. Limitez les variantes

Ne chargez que les poids nécessaires (400, 700) et les caractères latins.