Chargement des polices web et stabilité de la mise en page
Comprendre l’effet des polices web sur la stabilité, choisir un chargement robuste et garder un texte lisible pendant l’attente.
Vous voulez la documentation structurée pour Empreinte ?
Cet article fait partie de la bibliothèque éditoriale. Pour les étapes de configuration, la référence et les mises à jour continues, passez directement à la section docs.
Les polices web peuvent améliorer l’identité et la lecture, mais un remplacement tardif déplace le texte, les commandes et les images. Une mise en page stable affiche d’abord une police de repli lisible, réserve l’espace nécessaire et rapproche ses métriques de la police finale. Les standards CSS Fonts et CSS Font Loading décrivent les capacités du navigateur sans imposer une politique unique.
La spécification CSS Fonts définit les faces et font-display. La CSS Font Loading API sert aux tâches qui doivent attendre une face précise. MDN sur font-display décrit le comportement et la compatibilité. Ces sources publiques concernent la présentation, pas l’inventaire des polices installées.
Voir aussi les notions de confidentialité du navigateur et de mesure des performances.
Pourquoi le texte se déplace
La largeur des glyphes, les ascendantes, les descendantes, l’interligne et la taille déterminent l’espace occupé. Une police système peut être plus large qu’une police web : un titre change de ligne, un bouton grandit et le contenu inférieur descend. Le cache, la latence et la politique réseau rendent le premier chargement différent d’une visite ultérieure.
Le bon critère est l’usage pendant l’attente. Le lecteur doit pouvoir comprendre le contenu, atteindre les contrôles et lire un état de chargement honnête. Le contenu essentiel ne doit pas être caché jusqu’à l’arrivée de la police.
Choisir font-display pour chaque rôle
swap affiche généralement le repli puis remplace la face lorsqu’elle arrive. optional peut conserver le repli si l’attente est coûteuse ; fallback prévoit un blocage court et un échange limité. Les durées sont déterminées par le navigateur, donc il ne faut pas annoncer un délai fixe.
La police du corps doit privilégier la lecture et une largeur prévisible. Une face décorative peut être facultative. Une police d’icônes ne doit jamais porter seule le nom accessible : ajoutez un texte ou un SVG. En cas d’échec, une connexion lente, hors ligne ou bloquée doit laisser la page utilisable.
Aligner les métriques et réserver l’espace
size-adjust, ascent-override, descent-override et line-gap-override rapprochent une police de repli de la cible. Mesurez des titres, paragraphes, nombres et libellés dans toutes les langues, puis documentez les valeurs. Sans prise en charge du descripteur, le repli ordinaire doit rester lisible.
Préférez des grilles flexibles, minmax(), le retour à la ligne et des hauteurs dictées par le contenu. Évitez le positionnement absolu pour le texte. Les boutons doivent accepter le libellé traduit le plus long et garder un focus visible. Une liste de nombreux noms locaux n’est pas une stratégie de mise en page et crée un signal de confidentialité inutile.
Charger les faces utiles et tester l’API
Déclarez seulement les graisses et styles de la page. unicode-range peut séparer de grands scripts, mais un texte mixte doit être testé pour éviter une seconde substitution. Une précharge est réservée à une face critique et fiable ; elle ne doit pas concurrencer le HTML, le CSS ou une image importante.
La CSS Font Loading API peut attendre une face pour mesurer un composant, exporter un document ou lancer un canevas. Détectez l’API, gérez les promesses rejetées et gardez le repli si document.fonts manque. Le déroulement des événements ne doit pas servir à déduire une famille de navigateur.
Accessibilité et validation par scénarios
Conservez contraste, agrandissement, interligne et visibilité du focus pendant le changement. Ne faites pas annoncer chaque substitution par un lecteur d’écran ; annoncez seulement une conséquence utile, comme une exportation impossible. Respectez couleurs forcées, agrandissement du texte et réduction des mouvements.
Validez cache froid et chaud, réponse lente, mode hors ligne, requête bloquée et absence de l’API. Vérifiez première peinture, retour à la ligne final, ordre du focus et action principale. Utilisez les titres et libellés les plus longs de chaque langue. Les journaux de test peuvent garder le navigateur et la vue, pas une liste de polices ni un historique détaillé des temps.
Confidentialité, cache et contrat public
Le chargement est un fait de la page courante, pas un attribut de compte ou une classification d’appareil. Une télémétrie comme font_policy=fallback suffit généralement ; ne conservez pas les noms bruts ni les mesures caractère par caractère. En cas d’incident, limitez l’accès et supprimez les détails temporaires après résolution.
Versionnez les URL et publiez feuille de style et fichiers ensemble. Lors d’un changement de police, revoyez navigation, formulaires, tableaux, prix, dates et erreurs dans chaque langue. La documentation doit indiquer que le repli reste disponible et que le navigateur, le réseau et le cache influencent le résultat.
Le chargement des polices appartient au budget de performance.
Le texte de repli reste lisible.
Les retours à la ligne peuvent changer.
Le bouton conserve son libellé.
Les nombres demandent aussi des tests.
La décoration ne porte pas la tâche.
La latence n’est pas une erreur.
Un cache chaud ne garantit rien.
La police système reste le secours.
Le mode hors ligne garde le contenu.
La politique appartient à la présentation.
L’autorisation ne dépend pas de la police.
Le serveur n’a pas besoin d’inventaire.
Enregistrez seulement la politique.
Supprimez les champs de diagnostic temporaires.
Ne créez pas de profil de polices.
Expliquez clairement l’attente.
Gardez le focus du clavier.
La cible tactile reste visible.
Le texte agrandi doit revenir à la ligne.
Vérifiez les couleurs forcées.
L’ordre de lecture ne change pas.
Recalculez les boîtes de dialogue.
Donnez une zone de défilement aux tableaux.
Une liste virtuelle garde une marge.
Un format alternatif aide l’export.
Utilisez des données synthétiques.
Notez la configuration du navigateur.
Ne conservez pas la liste des polices.
Toutes les langues partagent les limites.
La traduction conserve la modalité.
Une capacité facultative n’est pas garantie.
Revoyez les métriques après mise à jour.
Publiez feuille et fichiers ensemble.
Évitez les nouvelles tentatives infinies.
Préchargez avec une raison claire.
Testez les limites de sous-ensembles.
Donnez un nom textuel aux icônes.
Gardez un repli réversible.
Le choix utilisateur doit être explicite.
Une actualisation ne perd pas la saisie.
Le but est une lecture stable.
Sources
Articles Connexes
Faites passer BotBrowser de la recherche à la production
Utilisez ces guides pour comprendre le modèle, puis passez à la validation multi-plateforme, aux contextes isolés et au déploiement navigateur prêt pour l'échelle.