Trouver les polices avec Chrome & Firefox DevTools

Les DevTools du navigateur vous permettent d'inspecter la police exacte rendue sur n'importe quel élément. Voici comment les utiliser - et quand le scanner URL est le choix le plus rapide.

Chrome DevTools - Polices rendues

  1. 1Faites un clic droit sur n'importe quel texte et sélectionnez Inspecter (ou appuyez sur Ctrl+Maj+I / Cmd+Option+I).
    Menu contextuel Chrome avec Inspecter mis en évidence en bleu
    Voir la capture complète
    Clic droit sur n'importe quel texte, puis Inspecter
  2. 2Chrome ouvre le panneau Éléments avec l'élément cliqué déjà mis en évidence dans l'arborescence DOM.
  3. 3Dans le panneau droit, cliquez sur l'onglet Calculé (deuxième onglet, à côté de Styles).
  4. 4Faites défiler sous les propriétés CSS jusqu'à la section Polices rendues.
    Onglet Calculé Chrome DevTools montrant les Polices rendues : Inter Variable depuis un fichier woff2
    Voir la capture complète
    Onglet Calculé - faites défiler jusqu'à "Polices rendues" pour voir la police active
  5. 5Vous voyez la police exacte utilisée par le navigateur, le fichier source chargé et le nombre de glyphes dessinés.

Firefox DevTools - Onglet Polices

  1. 1Clic droit sur n'importe quel texte, puis Inspecter (ou F12). Le panneau Inspecteur s'ouvre.
  2. 2Dans le panneau droit de l'Inspecteur (où vous voyez Règles et Calculé), cliquez sur l'onglet Polices.
  3. 3La colonne gauche liste toutes les polices chargées. Cliquez sur un nom pour voir le spécimen, la plage de graisse, le format et l'URL source.
    Onglet Polices Firefox DevTools - Inter Variable sélectionné, avec spécimen et détails
    Voir la capture complète
    Onglet Polices Firefox - toutes les polices listées à gauche, détails à droite

Limites de l'approche DevTools

Les DevTools fonctionnent bien pour inspecter des éléments individuels, mais ne donnent pas un inventaire complet de toutes les polices chargées. Pour un audit complet - collez l'URL ci-dessous.

Plus rapide : scanner la page complète par URL

Collez n'importe quelle URL et obtenez la liste complète de toutes les polices web - chaque règle @font-face, import Google Fonts et lien CDN - en un seul scan.

Questions fréquentes

Que sont les "Polices rendues" dans Chrome ?

Polices rendues affiche la police réellement utilisée par le navigateur pour dessiner le texte sélectionné - après application des polices de remplacement font-family.

Pourquoi la police rendue diffère-t-elle de font-family CSS ?

font-family est une liste de polices de remplacement priorisée. Si la première échoue à charger, le navigateur passe à la suivante. Polices rendues montre ce qui a été utilisé réellement.

Puis-je trouver toutes les polices d'une page avec les DevTools ?

L'onglet Polices de Firefox affiche toutes les polices chargées. Chrome nécessite d'inspecter les éléments un par un. Pour un inventaire complet, utilisez le scanner URL ci-dessus.

Le scanner URL détecte-t-il aussi Google Fonts ?

Oui - toutes les sources sont détectées : Google Fonts, Bunny Fonts, Fontshare et les polices @font-face auto-hébergées.

Retour au vérificateur de polices