List All Fonts analyse n'importe quelle page web et présente un inventaire complet de chaque famille de polices utilisée — les polices web chargées depuis des CDN, les polices auto-hébergées et les polices système de secours. Chaque police affiche un aperçu de texte en direct, les graisses et styles chargés, le nombre d'éléments qui l'utilisent, et une copie en un clic de la déclaration CSS font-family.
Identifier les polices d'un site que vous admirez nécessitait autrefois d'inspecter les éléments un par un dans DevTools, de vérifier la propriété computed font-family, ou d'utiliser des extensions de navigateur ne détectant qu'une seule police à la fois. List All Fonts vous offre une vue d'ensemble complète — chaque police chargée et utilisée sur la page, avec des exemples de texte en direct montrant exactement comment chaque police s'affiche. L'outil différencie les polices web (chargées via @font-face ou Google Fonts) des polices système (Arial, Helvetica, Georgia, etc.), en affichant la pile font-family complète. Pour chaque police, vous voyez quelles graisses sont chargées (400, 600, 700), quels éléments l'utilisent et quelles tailles de police sont appliquées. Cliquez sur n'importe quelle police pour copier sa déclaration CSS — prête à coller dans votre propre projet. L'aperçu en direct utilise le rendu réel de la police depuis la page, et non un aperçu générique — vous voyez exactement comment la police s'affiche aux tailles et graisses utilisées sur le site.
Liste chaque font-family réellement affichée sur la page, y compris les polices web de Google Fonts, Adobe Fonts ou les déclarations @font-face personnalisées, ainsi que les polices système de secours. Affiche le nombre total de familles de polices uniques trouvées.
Chaque police est affichée avec un exemple de texte en direct (« The quick brown fox jumps over the lazy dog ») rendu en utilisant le fichier de police réel chargé sur la page. Vous voyez un rendu authentique — pas un aperçu générique.
Pour chaque police, voyez quelles graisses sont chargées (Regular 400, Medium 500, SemiBold 600, Bold 700) et si des variantes italiques sont disponibles. Vous aide à comprendre le sous-ensemble chargé de la police.
Voyez combien d'éléments de la page utilisent chaque police. La police la plus utilisée apparaît en premier. Identifiez les polices principales (corps du texte) et celles secondaires (utilisées sur quelques éléments seulement).
Cliquez sur n'importe quelle entrée de police pour copier sa déclaration CSS font-family complète (ex. : font-family: 'Inter', sans-serif) dans votre presse-papiers. Prête à coller directement dans votre feuille de styles.
Chaque police indique sa source : Google Fonts (avec l'URL spécifique), Adobe Fonts, auto-hébergée (avec l'URL @font-face), ou police système. Sachez exactement d'où provient chaque police.
Visitez un site web à la typographie soignée et voyez instantanément chaque police qu'il utilise — noms, graisses et provenance. Fini les « c'est quelle police ? » ou le recours à des outils d'identification de polices peu fiables.
Combien de polices votre page charge-t-elle ? Y a-t-il des polices téléchargées mais non appliquées ? List All Fonts affiche l'utilisation réelle — si une police chargée ne s'applique à aucun élément, c'est de la bande passante gaspillée.
Documentez la typographie de votre projet en exécutant List All Fonts sur chaque page. Vérifiez que les polices et graisses correctes sont utilisées de manière cohérente sur tout le site — repérez les déclarations font-family parasites.
Vous avez identifié une police qui vous plaît mais elle est payante ? Copiez le nom de la police et recherchez des alternatives gratuites aux caractéristiques similaires. L'aperçu en direct vous aide à vous rappeler exactement comment elle apparaissait.
Exécutez List All Fonts sur la même page dans différents navigateurs pour vérifier que les mêmes polices sont affichées partout. Les piles de polices système se résolvent différemment selon les systèmes d'exploitation — repérez les incohérences.
Ouvrez le dock flottant DevSuite Pro et cliquez sur l'icône List All Fonts. L'outil analyse les styles calculés de la page et les règles @font-face.
Un panneau affiche toutes les polices trouvées sur la page, triées par fréquence d'utilisation. Chaque entrée indique le nom de la police, le texte d'aperçu, les graisses et le nombre d'éléments.
Faites défiler les aperçus en direct pour voir comment chaque police s'affiche. Comparez la police des titres de la page avec la police du corps du texte et la police d'accentuation.
Cliquez sur n'importe quelle entrée de police pour copier sa déclaration CSS font-family. Cliquez sur le lien source pour visiter l'origine de la police (page Google Fonts, URL du CDN, etc.).
Collez la déclaration font-family dans votre CSS et chargez la police depuis la même source pour l'utiliser dans votre propre projet.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.
