L'essai précédent de cette série soutenait que beaucoup d'applications ne devraient embarquer aucune fonte. Celui-ci s'adresse aux surfaces où la police de caractères mérite ses octets — parce que « elle vaut la peine d'être chargée » est le point où l'ingénierie commence, pas celui où elle s'arrête. Une fonte web est une dépendance qui bloque le rendu du contenu le plus important de la page. Budgétez-la comme telle.
Un seul fichier, toutes les graisses
La décision au plus fort effet de levier est l'architecture des fichiers. Une famille traditionnelle est livrée en instances statiques — romain, italique, gras, parfois une version d'affichage — chacune sa propre requête, facilement 300 à 400 Ko au total. Une fonte variable transporte la même étendue (souvent davantage : toutes les graisses de 100 à 900) dans un seul fichier qui pèse typiquement moins que deux statiques.
Moins de fichiers signifie aussi moins d'occasions de chargement partiel — pas de flash de vrai-italique-faux-gras pendant que le fichier du gras traîne en route. Et les axes supplémentaires du fichier variable sont fonctionnels : taille optique pour le petit texte, grade pour les thèmes sombres — des capacités, pas du poids mort.
Un sous-ensemble taillé pour de bon
La plupart des fichiers de fontes sont surtout composés de caractères que votre interface n'affichera jamais. Le subsetting — réduire le fichier aux écritures et aux caractères que vous utilisez réellement — divise couramment par deux une fonte latine, et unicode-range vous permet de conserver une couverture plus large sans la payer d'avance : déclarez le sous-ensemble latin et le sous-ensemble étendu comme des faces séparées, et le navigateur ne télécharge l'extension que lorsqu'un caractère correspondant apparaît. Des outils comme pyftsubset/fonttools en font une étape de build, pas un projet d'artisanat. WOFF2 va sans dire ; si vous livrez autre chose en 2026, commencez par là.
font-display, choisi honnêtement
Le comportement de chargement est une décision produit déguisée en CSS :
blockmasque le texte pendant que la fonte se charge. Presque jamais défendable — vous échangez le temps de vos lecteurs contre la vanité de votre marque.swapaffiche immédiatement la police de substitution et bascule quand la fonte arrive. Le bon choix pour les surfaces de lecture — mais il fait du moment du remplacement votre problème, ce qui est l'objet de la section suivante.optionaln'utilise la fonte que si elle est déjà en cache (en gros : tout de suite ou jamais). Pour les applications à hautes performances qui tiennent à une fonte web, c'est le réglage honnête — la première visite se lit dans la police de substitution, chaque visite ultérieure obtient la police de marque, et rien ne bouge jamais.
Régler le remplacement jusqu'à l'invisibilité
Si vous choisissez swap, le décalage de mise en page est à vous d'éliminer. La boîte à outils moderne y parvient presque parfaitement : une @font-face de substitution bâtie sur une fonte système locale avec size-adjust, ascent-override et descent-override réglés pour que la substitution occupe le même espace que la fonte web. Le texte s'affiche instantanément dans la substitution ajustée ; la fonte web arrive ; rien ne bouge. Ce site fait exactement cela — la substitution Georgia de la police de titrage est mise à l'échelle métriquement pour que le remplacement soit un changement de voix, pas un changement de mise en page.
Terminez par l'hygiène de livraison : auto-hébergez (un CDN de fontes tiers est une question de vie privée et une négociation de connexion dont vous n'avez pas besoin), préchargez le seul fichier critique, et définissez des en-têtes de cache immuables pour que le coût ne soit payé qu'une fois par utilisateur, à jamais.
Le budget complet d'une police de labeur sérieuse, menée ainsi : une seule WOFF2 variable préchargée, en sous-ensemble limité à vos langues, environ 40 à 90 Ko, swap avec une substitution métriquement compatible ou optional tout court. C'est moins cher que la plupart des images de héros — soit exactement le niveau d'exigence que la police de caractères devait atteindre depuis le début.