Optimisez les polices en chargeant moins de glyphes et de styles nécessaires, en gardant le texte lisible pendant le transfert et en choisissant un repli adapté à la police finale. WOFF2, sous-ensembles et préchargement ciblé traitent transfert et découverte ; font-display et les métriques de repli traitent l’affichage. Mesurez visibilité initiale et stabilité : un téléchargement rapide n’empêche pas à lui seul un remplacement tardif de déplacer le contenu.
Localisez le retard avant de changer la police
Une police web est généralement découverte dans le CSS. Le navigateur doit trouver la feuille, analyser @font-face et déterminer la fonte requise avant de la demander. Une feuille lente ou une chaîne d’imports peut donc retarder un petit fichier.
Filtrez les polices dans Network et examinez l’initiateur. Notez la feuille déclencheuse et l’utilisation dans le premier écran. Vérifiez les polices réellement rendues dans DevTools au lieu de supposer que la première famille CSS couvre chaque caractère.
Une phrase peut utiliser plusieurs replis si des glyphes manquent. Cela concerne ponctuation, devises, noms et langues mélangées. Un paragraphe latin correct ne prouve pas une couverture complète en coréen ou hébreu.
Observez une connexion lente sans cache. Un texte invisible suggère un choix d’affichage ; une largeur changeante, un désaccord de métriques ; une requête tardive, un problème de découverte. Utilisez le guide LCP lorsque le grand bloc de texte est LCP et le guide des décalages lorsque le mouvement domine.
Réduisez les fontes et les glyphes envoyés
WOFF2 est un point de départ courant pour les navigateurs modernes. Conservez les sources dans le build, mais n’envoyez pas plusieurs formats anciens sans besoin de compatibilité. Vérifiez la licence avant auto-hébergement, modification ou sous-ensemble : un fichier téléchargeable n’autorise pas nécessairement la redistribution d’un dérivé.
Inventoriez familles, graisses et styles réellement utilisés. Le design ne nécessite peut-être pas toute la collection. Retirez les déclarations et requêtes superflues à la source. Vérifiez ensuite gras et italique pour éviter une synthèse inattendue d’un style qui devait être fourni.
Un sous-ensemble est un fichier réduit contenant certains glyphes et les tables nécessaires à leur rendu. unicode-range annonce des points de code, sans retirer physiquement les glyphes du fichier. Pour économiser des octets, le fichier référencé doit être un véritable sous-ensemble.
Cette déclaration latine illustrative suppose un fichier existant avec les caractères annoncés.
@font-face {
font-family: "Editorial Sans";
src: url("/fonts/editorial-sans-latin-regular.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
unicode-range: U+0000-00FF;
}
body {
font-family: "Editorial Sans", Arial, sans-serif;
}Ce domaine n’est pas une stratégie multilingue complète. Il omet de nombreux caractères et ne peut être l’unique sous-ensemble des six langues du site. Testez mise en forme des glyphes, ponctuation et marques requises. Une couverture déclarée ne crée aucun glyphe absent.
Gardez des frontières maintenables. Une fonte minuscule par article peut réduire les octets locaux, mais limiter la réutilisation et compliquer les mises à jour. Pour une publication évolutive, des sous-ensembles stables par langue ou écriture sont souvent plus gérables. Mesurez les requêtes avant de fragmenter davantage.
Choisissez font-display comme politique de lecture
font-display est un descripteur de @font-face. Il décide du comportement lorsque cette fonte manque ; le placer sur body ne configure pas une fonte. Le choix équilibre lisibilité immédiate, emploi ultérieur de la police et remplacement visible.
Les périodes sont pilotées par le navigateur, sans garantie chronométrique universelle.
| Valeur | Comportement pratique | Compromis principal |
|---|---|---|
auto |
Le navigateur décide | Moins de contrôle initial explicite |
block |
Blocage court, remplacement illimité | Texte initialement invisible possible |
swap |
Blocage extrêmement court, remplacement illimité | Lecture rapide mais déplacement tardif possible |
fallback |
Blocage très court et remplacement court | La police finale peut ne plus remplacer le repli ensuite |
optional |
Blocage très court, sans période de remplacement | La visite peut conserver le repli |
swap permet l’apparition finale de la police, sans résoudre automatiquement CLS. Des largeurs ou métriques différentes peuvent changer les retours à la ligne et déplacer la suite. optional évite un remplacement tardif, mais le design doit rester acceptable avec la police système.
Un mot-symbole décoratif et un long article peuvent justifier des choix différents. Ne rendez pas le texte illisible pour une préférence de marque. Testez contenu et appareils réels : une bonne expérience en cache peut masquer un premier affichage gênant.
Consultez la référence font-display, puis testez livraison normale et requêtes bloquées pour concevoir délibérément le repli.
Préchargez seulement une fonte vraiment critique
Preload avance la requête par rapport à la découverte CSS normale, mais consomme de la bande passante au moment où HTML, CSS et image LCP rivalisent. Précharger toutes les graisses et langues annule une partie de la sélection à la demande.
L’exemple précharge une fonte du premier écran et emploie exactement la même URL dans le CSS.
<link rel="preload"
href="/fonts/editorial-sans-latin-regular.woff2"
as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-family: "Editorial Sans";
src: url("/fonts/editorial-sans-latin-regular.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
</style>Le préchargement de polices exige le mode CORS approprié, même en auto-hébergement. Pour une origine distante, la réponse doit aussi autoriser la requête. Faites correspondre URL, type et mode afin de réutiliser le preload sans second téléchargement.
Preload n’applique pas la police. Confirmez son utilisation rapide et l’absence d’avertissement de preload inutilisé dans Console. Comparez les cascades : avancer la fonte en retardant une image plus importante peut être un mauvais échange.
Avec un service externe, examinez séparément origines de feuille et de fichiers. Un preconnect ciblé peut réduire l’établissement de connexion, sans supprimer la découverte CSS ni garantir un gain. Ne préconnectez pas tous les domaines externes.
Ajustez les métriques de la police de repli
Des polices ressemblantes peuvent occuper des espaces différents. Comparez largeurs, hauteur d’x, ascendantes, descendantes et intervalles de ligne. Une ligne supplémentaire importe souvent davantage qu’une petite différence de forme, car elle décale tout le contenu suivant.
size-adjust redimensionne contours et métriques. ascent-override, descent-override et line-gap-override alignent les valeurs verticales. Calculez-les pour la paire réelle ; aucun pourcentage universel ne convient à toutes les polices et plateformes.
Voici une démonstration syntaxique aux valeurs illustratives, pas une calibration d’une véritable « Editorial Sans ». Remplacez-les après mesure.
@font-face {
font-family: "Editorial Fallback";
src: local("Arial");
size-adjust: 100%;
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}
.article-body {
font-family: "Editorial Sans", "Editorial Fallback", sans-serif;
line-height: 1.6;
}La police locale doit exister sur l’appareil. Conservez une famille générique finale et testez les systèmes dépourvus de la fonte nommée. Les ajustements réduisent les écarts sans garantir les mêmes retours à la ligne pour chaque chaîne.
Comparez titres, longs libellés, nombres, ponctuation et paragraphes. Utilisez les traductions plutôt qu’un exemple anglais répété. Une hauteur de ligne explicite stabilise le rythme vertical, mais ne supprime pas les retours causés par des largeurs différentes.
Comparez les polices variables aux styles nécessaires
Une police variable regroupe plusieurs graisses ou axes dans un fichier et peut remplacer plusieurs fontes statiques. Elle n’est pas nécessairement plus légère que les un ou deux styles réellement employés. Comparez les sous-ensembles et axes livrés.
Cette déclaration expose des graisses de 100 à 900, sous réserve que le fichier les prenne en charge.
@font-face {
font-family: "Editorial Variable";
src: url("/fonts/editorial-variable-latin.woff2") format("woff2");
font-style: normal;
font-weight: 100 900;
font-display: swap;
}
h1 { font-family: "Editorial Variable", sans-serif; font-weight: 650; }Ne déclarez pas des axes absents. Vérifiez l’italique séparément et respectez l’usage documenté. Si le build réduit les axes, contrôlez rendu et fonctionnement : un axe retiré peut modifier discrètement le design.
Préparez le coréen, l’hébreu et les polices système
Le coréen demande une couverture plus large qu’une interface latine. Un fichier CJK complet peut être lourd ; des sous-ensembles par page trop agressifs peuvent oublier texte dynamique, noms et publications futures. Envisagez des ensembles stables, la segmentation documentée d’un service ou une pile système testée. Inspectez les requêtes coréennes avec abréviations latines et nombres.
L’hébreu nécessite ses caractères, ponctuation et marques prises en charge, avec le latin technique. Une police ne définit pas la direction du document. Séparez RTL et texte bidirectionnel des réglages de chargement et testez libellés de code, chiffres et signes en contexte.
L’auto-hébergement maîtrise URL, cache et mises à jour. Un service peut gérer formats et segmentation, mais ajoute feuilles et origines. Aucune solution n’est toujours la plus rapide. Comparez la chaîne réelle, les responsabilités d’exploitation et la confidentialité.
Les polices système constituent un choix final valable. Elles évitent un transfert spécifique et peuvent apparaître tôt, mais leur aspect et leurs métriques varient selon la plateforme. Concevez une pile intentionnelle et testez toutes les écritures. Supprimer le téléchargement aide si lisibilité, hiérarchie et couverture restent bonnes.
Vérifiez un changement sur des états réels
Commencez par une page où les fontes affectent le premier écran. Notez requêtes, moment de lisibilité et mouvements. Répétez avec cache froid, chaud et polices bloquées. Incluez une page coréenne et une page hébraïque si ces éditions existent.
Après modification des fontes, sous-ensembles ou preloads, recherchez doublons, glyphes absents et graisses synthétiques. Examinez trace et mise en page ensemble. Un fichier réduit est intermédiaire ; le résultat recherché est un texte lisible et stable.
Consignez fichiers et politique dans la checklist de performance. Si la découverte reste tardive, poursuivez l’analyse des ressources bloquant le rendu. Intégrez la vérification à l’optimisation de vitesse pour qu’une refonte ne réintroduise pas des fontes inutiles ou un repli instable.
