Les polices web restent le gain de performance le plus simple sur la plupart des sites

Le schéma qui revient sans cesse

Si vous auditez aujourd’hui dix sites de production au hasard, vous trouverez à peu près la même situation typographique sur la plupart d’entre eux :

• Six à dix fichiers de police chargés sur la page d’accueil
• Tous en WOFF2 (bien) mais sans stratégie font-display (moins bien)
• Plusieurs graisses et styles qui ne sont utilisés nulle part sur la page
• Toute la pile servie depuis un domaine tiers (Google Fonts, généralement), avec le coût DNS, TLS et de confidentialité que cela implique
• Aucun sous-ensemble unicode-range, donc chaque visiteur télécharge les glyphes cyrilliques et grecs même si la page est en anglais

Ce problème ne concerne pas seulement les petits sites. De nombreuses pages marketing bien financées chargent encore 600 Ko de polices avant que le premier paragraphe puisse être affiché. Une fois que vous commencez à remarquer ce schéma, vous ne pouvez plus ne pas le voir.

La correction n’a rien d’exotique. Il s’agit d’une poignée de techniques bien comprises, présentes dans les navigateurs depuis des années.

Utilisez une police variable au lieu de six polices statiques

Si vous chargez Inter Regular, Inter Medium, Inter SemiBold, Inter Bold et leurs italiques, vous téléchargez environ six fois plus d’octets que nécessaire. Une seule police variable Inter couvre tout l’axe de graisse (et l’inclinaison, dans certaines versions) dans un fichier à peine plus volumineux que deux graisses statiques.

La question de la prise en charge par les navigateurs est réglée depuis des années — les polices variables fonctionnent partout où cela compte. Les hésitations restantes relèvent surtout de réflexes hérités de l’époque des polices statiques.

Règle pratique : un fichier de police variable par système d’écriture, par famille. Le latin dans un fichier, le cyrillique dans un autre, le grec dans un troisième, chargés conditionnellement avec unicode-range. C’est tout.

Définissez un font-display raisonnable

Le comportement par défaut lorsqu’une police personnalisée est encore en cours de chargement consiste à ne rien afficher — du texte invisible — pendant jusqu’à trois secondes. C’est le pire défaut possible. Les utilisateurs voient une page blanche et supposent que quelque chose est cassé.

Ajoutez ceci à chaque règle @font-face :

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

swap affiche immédiatement la police de repli, puis remplace celle-ci par la police personnalisée lorsqu’elle est chargée. L’utilisateur peut lire la page dès la milliseconde zéro. Le compromis est un bref décalage de mise en page au moment de l’échange, que vous atténuez avec la technique suivante.

Alignez les métriques de votre police de repli

Un flash de texte non stylé ne paraît brutal que lorsque la police de repli et la police personnalisée ont des métriques très différentes. Le CSS moderne corrige cela avec size-adjust, ascent-override et leurs équivalents :

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

Avec des métriques de repli bien réglées, l’échange est à peine perceptible — les mots occupent le même espace horizontal avant et après l’arrivée de la police personnalisée.

Le travail de Google autour de --allow-fallback-font-metrics fait désormais partie du socle de prise en charge des navigateurs, et il existe une chaîne d’outillage (la bibliothèque fontaine et des outils similaires) qui calcule les bonnes valeurs pour vous en quelques secondes.

Auto-hébergez

Google Fonts est pratique, gratuit, et entraîne deux coûts bien réels :

1. Une seconde poignée de main TLS. Même avec HTTP/3 et la coalescence des connexions, une origine supplémentaire est rarement gratuite.
2. Une question de confidentialité et de conformité. Plusieurs tribunaux européens ont jugé que charger Google Fonts depuis fonts.gstatic.com revient à transmettre des données personnelles (l’adresse IP) à un tiers. L’auto-hébergement supprime entièrement la question.

La chaîne téléchargement-et-hébergement est la suivante :

1. Récupérer le fichier WOFF2 (version variable si elle existe)
2. Le réduire aux systèmes d’écriture que votre audience utilise réellement
3. Le servir depuis la même origine que le reste de votre site, avec un long Cache-Control: max-age=31536000, immutable
4. Précharger la graisse la plus critique : <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

C’est toute la chaîne. Cela prend un après-midi pour un site existant, et l’on revient presque jamais en arrière.

Quand se passer entièrement de polices personnalisées

Il vaut la peine de le dire clairement : tous les sites n’ont pas besoin d’une police personnalisée. La pile de polices système est désormais réellement élégante sur chaque système d’exploitation :

font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;

La graisse est juste, les métriques sont justes, le rendu est optimisé pour l’appareil, et le coût en octets transférés est exactement nul. Pour un site d’outils, une application interne, un portfolio qui privilégie le contenu, ou tout produit destiné à des utilisateurs sur des réseaux lents, la pile système est la bonne réponse.

<!-- tool-cta:start -->

💡 Essayez ceci : Convertissez vos fichiers TTF ou OTF en WOFF2 moderne avec du CSS prêt à l’emploi à l’aide de Webfont Generator, ce qui correspond au changement de format recommandé par l’article.

<!-- tool-cta:end -->

Le résumé honnête

Pour un petit site typique, quatre étapes couvrent toute la question de la performance des polices web :

1. Une police variable par famille et par système d’écriture
2. font-display: swap avec des métriques de repli alignées
3. Auto-hébergée avec de longs en-têtes de cache et un preload pour la graisse critique
4. Ou se passer entièrement de polices et utiliser la pile système

Faites-le une fois et vous récupérez plusieurs centaines de kilo-octets sur la page d’accueil, gagnez quelques centaines de millisecondes de performance perçue, et supprimez au passage une dépendance tierce. Peu de changements offrent un meilleur rapport effort/résultat.