Une police téléchargée peut rester inutilisée parce que CSS en sélectionne une autre, que le texte ne fait pas partie de sa couverture ou que sa période d’affichage est passée. Sur Mac, commencez par examiner la police qui affiche réellement un libellé, puis remontez la piste de sa sélection et de son chargement.

Ce guide s’adresse à une personne qui gère une page Web et voit une requête de police aboutir, mais constate toujours l’affichage de la police de remplacement. Utilisez Chrome sur macOS pour les étapes d’inspection. Le libellé fictif Panel 204 et le nom de famille Sample Sans ci-dessous illustrent le diagnostic ; ils ne désignent aucun site Web en particulier.

Que prouve réellement un téléchargement réussi ?

Traitez le diagnostic comme quatre questions distinctes : la ressource a-t-elle été récupérée ? Une fonte utilisable a-t-elle été enregistrée ? CSS a-t-il sélectionné cette fonte pour ces caractères ? Le moteur de rendu l’a-t-il dessinée ? Le préchargement d’une police lance une récupération anticipée ; sa présence ne permet pas de déterminer quelle police fournit le texte visible. MDN : rel="preload"

La mise en correspondance des polices porte sur le texte, pas simplement sur les fichiers téléchargés. Le navigateur prend en compte les familles demandées et les propriétés des polices, puis vérifie la prise en charge des caractères. Par conséquent, un même libellé peut utiliser plusieurs polices, et une autre partie de la page peut déclencher le téléchargement d’une police sans rien vous apprendre sur le libellé visé. W3C : module CSS Fonts niveau 4, mise en correspondance des polices

Utilisez ce tableau de décision pour choisir la prochaine vérification. Il s’agit d’une aide au diagnostic fondée sur les limites documentées du chargement et de la mise en correspondance, et non d’un relevé de résultats de navigateur mesurés.

Observation Vérification suivante Ce que cela permet de distinguer
La famille calculée diffère de la famille prévue Suivez la déclaration CSS gagnante Problème de cascade ou de ciblage
La famille calculée est correcte, mais la police rendue diffère Examinez les descripteurs de la fonte et la couverture des caractères Problème de sélection ou de police de remplacement
JavaScript signale qu’une fonte est chargée, mais elle est absente de l’ensemble de polices du document Examinez le code d’enregistrement Chargement sans enregistrement
La police apparaît après un rechargement, mais pas lors de la première visite Examinez font-display et le moment du chargement Comportement lié à la période d’affichage
Le texte ordinaire s’affiche correctement, mais le texte du canevas reste inchangé Examinez l’ordre des opérations de dessin et les paramètres de police du canevas Opération de dessin distincte

Quelle police affiche réellement le libellé visé ?

Sur la page concernée, appuyez sur Command + Shift + C et sélectionnez le texte. Dans Elements, sélectionnez le plus petit élément contenant le libellé concerné. Ouvrez Computed, puis faites défiler jusqu’à Rendered Fonts. Chrome indique que cette vue permet d’examiner les polices qui fournissent le texte rendu. Chrome DevTools : référence des fonctionnalités CSS, Chrome DevTools : appliquer d’autres effets

Notez la fonte rendue et indiquez si sa source est locale ou provient d’une ressource réseau. Notez également les valeurs calculées de font-family, font-weight et font-style. La famille calculée correspond à la pile de polices demandée ; le résultat des polices rendues identifie celle qui a fourni les glyphes. Une apparence familière ne constitue qu’un indice peu probant, car deux fontes peuvent se ressembler. Chrome DevTools : quelle est cette police ?

Si la fonte prévue apparaît pour le texte concerné, examinez la différence d’apparence précise, par exemple le poids ou les fonctionnalités. Si elle est absente, poursuivez les vérifications ci-dessous. Conservez le texte et la fenêtre d’affichage d’origine pendant les tests afin que chaque observation reste comparable.

Le CSS effectif demande-t-il la fonte prévue ?

Dans Computed, examinez les propriétés de police effectives, puis utilisez Styles pour trouver leurs déclarations. Chrome distingue ces vues : Styles inclut les déclarations remplacées, tandis que Computed affiche les valeurs effectivement appliquées. Examinez l’enfant qui contient le texte lorsqu’une carte comporte plusieurs libellés ; la déclaration de police du parent ne suffit pas à établir celle de l’enfant. Chrome DevTools : référence des fonctionnalités CSS

Vérifiez toute abréviation font gagnante ainsi que les propriétés individuelles. Par exemple, font: 16px sans-serif sélectionne une famille générique et réinitialise les composants omis de l’abréviation, notamment le poids et le style. Elle réinitialise aussi des propriétés comme font-feature-settings et font-variation-settings. Corrigez la déclaration responsable de la valeur inattendue, puis vérifiez à nouveau. MDN : font

Comparez ensuite la famille demandée au descripteur font-family de la règle @font-face concernée. Ce descripteur définit le nom de famille CSS utilisé pour référencer la fonte ; le nom du fichier n’est pas celui à placer dans la pile de polices de l’élément. Vérifiez la règle transmise au navigateur, y compris son src, son poids, son style et les éventuelles plages déclarées. MDN : @font-face

La plage de poids prise en charge par une police variable peut être exprimée par deux valeurs, tandis qu’une fonte statique peut en déclarer une seule. Faites en sorte que ces descripteurs décrivent fidèlement la ressource fournie. Une incohérence mérite d’être examinée, mais elle n’explique pas automatiquement le recours à une police de remplacement : la mise en correspondance des polices prévoit des alternatives lorsqu’un style exact n’est pas disponible. MDN : @font-face, W3C : mise en correspondance des styles de police

Une police locale pourrait-elle être prioritaire ?

Examinez src pour y repérer une alternative local(). Sur un Mac où cette police est installée, le navigateur peut utiliser la copie locale alors qu’une police Web préchargée séparément reste inutilisée. Pour isoler ce cas dans Chrome, ouvrez le panneau Rendering, activez Disable local fonts et rechargez la page. Comparez Rendered Fonts avant et après, puis rétablissez le paramètre. Ce test cible les sources local() des règles @font-face. Chrome DevTools : appliquer d’autres effets

La fonte a-t-elle été chargée et enregistrée dans le bon document ?

Une fonte créée avec new FontFace() peut finir de se charger avant d’être ajoutée à un ensemble de polices. Pour le rendu du document, elle doit être ajoutée à document.fonts. Examinez le chemin de chargement de l’application pour vérifier ces deux opérations ; la résolution de la promesse de chargement de la fonte ne suffit pas à terminer son enregistrement. MDN : API de chargement des polices CSS

Le diagnostic complet suivant, à exécuter dans la console, répertorie les fontes enregistrées dans le document actuel. Exécutez-le dans le contexte de la console de la page concernée. Il lit l’ensemble sans lancer de chargement ni modifier les styles ; il n’identifie pas les glyphes rendus. Son comportement, qui dépend du navigateur, n’a pas été exécuté ici.

(() => {
  const faces = Array.from(document.fonts, face => ({
    family: face.family,
    weight: face.weight,
    style: face.style,
    stretch: face.stretch,
    unicodeRange: face.unicodeRange,
    status: face.status
  }));

  console.table(faces);
  console.log("Registered face count:", faces.length);
})();

Utilisez l’inventaire pour distinguer une fonte non enregistrée d’une fonte enregistrée mais toujours inutilisée. Pour une entrée dont l’état est error, examinez l’échec du chargement avant de modifier la typographie. Une entrée loaded établit l’état du chargement, tandis que la sélection de la fonte dépend toujours de l’élément et du texte. MDN : API de chargement des polices CSS

Ne considérez pas document.fonts.check() comme une preuve de rendu. Cette méthode peut renvoyer true même pour une famille inexistante. Son argument texte facultatif restreint la mise en correspondance en fonction des plages Unicode déclarées et ne teste pas la couverture de chaque glyphe. De même, document.fonts.ready se résout après le chargement et la mise en page des polices utilisées ; cela ne certifie pas que chaque fonte déclarée a été rendue. MDN : FontFaceSet.check(), MDN : Document.fonts

La police couvre-t-elle les caractères que vous testez ?

Vérifiez à la fois le unicode-range CSS et la ressource de police elle-même. Le descripteur détermine quels caractères peuvent utiliser une fonte. Étendre le descripteur ne peut pas créer des glyphes absents du fichier : la table de correspondance des caractères de la police reste prise en compte lors de la mise en correspondance. MDN : unicode-range, W3C : mise en correspondance des styles de police

Considérez une règle illustrative limitée à U+0030-0039. Dans Panel 204, seuls 2, 0 et 4 appartiennent à cette plage. Les lettres et l’espace n’en font pas partie. Un téléchargement déclenché par les chiffres ne permet donc pas d’établir que la police peut afficher le libellé entier. MDN précise que la rencontre d’un caractère admissible peut entraîner le téléchargement de l’ensemble de la ressource de police. MDN : unicode-range

Cet exemple JavaScript autonome montre cette distinction. Il s’exécute dans la console d’un navigateur ou dans Node.js sans configuration. Le calcul déterministe de la plage a été exécuté pour l’exemple présenté.

const text = "Panel 204";
const rows = Array.from(text, character => {
  const value = character.codePointAt(0);
  return {
    character,
    codePoint: "U+" + value.toString(16).toUpperCase().padStart(4, "0"),
    inDeclaredRange: value >= 0x30 && value <= 0x39
  };
});

console.table(rows);

Si la plage exclut des caractères nécessaires, corrigez un descripteur inexact ou fournissez un sous-ensemble qui les contient. Conservez le texte défaillant d’origine lors de la vérification du résultat. Ne supposez pas qu’une itération sur une chaîne constitue un test de façonnage : les séquences combinées nécessitent une gestion par groupes, et la norme prend en compte les informations de façonnage lorsque cela est nécessaire. Conservez les séquences intactes lors de la comparaison du rendu. W3C : mise en correspondance des polices et des groupes de caractères

La police a-t-elle manqué sa période d’affichage ?

Examinez font-display lorsque la famille et la couverture semblent correctes. optional a une période de blocage extrêmement courte et aucune période de remplacement. fallback a une courte période de remplacement. Une ressource qui arrive après la période applicable peut donc laisser le texte de remplacement visible pendant ce chargement de page. swap autorise une période de remplacement illimitée après sa période de blocage initiale. MDN : font-display

Pour établir un diagnostic contrôlé, remplacez temporairement la règle concernée par font-display: swap dans la feuille de style servie et répétez les conditions du chargement initial. Si la fonte apparaît maintenant après le chargement, le délai est une explication étayée. Avant de conserver ce paramètre, déterminez si ce changement visuel ultérieur convient à la page. Répétez le test avec un chargement initial et un rechargement depuis le cache ; le seul résultat mis en cache ne reproduit pas le délai d’arrivée d’origine.

Que change le rendu du texte par une bibliothèque ou un canevas ?

Si la page utilise déjà Font Face Observer, examinez la famille observée et ses options weight, style et stretch. Sa documentation décrit un chargeur et un outil de surveillance, exige les règles @font-face habituelles ainsi qu’une chaîne de test personnalisée si la police ne contient pas ses caractères de test par défaut. Le délai d’attente par défaut est de trois secondes. Le délai d’attente d’un observateur et la période font-display du navigateur sont deux conditions distinctes. Documentation de Font Face Observer

Par déduction, un message de réussite de l’observateur devrait être suivi d’une inspection de l’élément visé. La surveillance de la disponibilité d’une fonte ne permet pas d’établir que le CSS gagnant de l’élément la demande. Installer un autre chargeur n’apporte pas grand-chose lorsque la question sans réponse est de savoir quelle fonte a été rendue.

Le canevas introduit une limite de dessin distincte. Son contexte de dessin possède son propre paramètre font, initialisé à 10px sans-serif ; toute affectation non valide est ignorée. Définir une famille CSS sur l’élément canevas ne suffit donc pas à établir la police utilisée par le contexte. Examinez la valeur affectée au contexte de dessin ainsi que l’ordre des opérations de chargement et de dessin. WHATWG : styles de texte du canevas

Pour le texte du canevas, attendez que la fonte enregistrée prévue se charge, définissez la police du contexte, puis redessinez la scène concernée à l’aide de la routine de dessin habituelle de l’application. Les pixels déjà peints n’adoptent pas une nouvelle police quand une fonte arrive. La préparation du texte du canevas utilise également une boîte de ligne hypothétique de largeur infinie ; un test concluant sur le canevas ne prouve donc pas qu’un libellé de page Web contraint se renverra à la ligne de la même façon. WHATWG : préparation du texte et dessin de texte

Comment confirmer la correction ?

Revenez au libellé d’origine et répétez l’observation qui a révélé le problème. Vérifiez sa demande calculée, la fonte rendue et les caractères concernés dans les conditions de chargement d’origine. Pour le canevas, redessinez avant de comparer. Consignez brièvement l’élément, les propriétés demandées, la fonte réellement rendue, la ressource et la modification qui a fonctionné ; le diagnostic pourra ainsi être reproduit.

Terminez lorsque vous pouvez expliquer pourquoi la police était inutilisée et montrer le résultat prévu sur le texte concerné. Une déclaration de famille corrigée, un sous-ensemble exact, une fonte enregistrée, une politique d’affichage adaptée ou un nouveau dessin correctement synchronisé résout chacun une limite différente. Choisissez la correction que vos observations permettent d’étayer.

Sources