Détecteur de polices web gratuit

Le Web Font Detector est un outil en ligne gratuit qui extrait toutes les polices utilisées dans le HTML ou le CSS et identifie les Google Fonts, les polices système et les polices web. Il fonctionne entièrement dans votre navigateur, sans installation ni inscription.

Collez votre source CSS ou HTML, et l'outil extrait toutes les déclarations font-family et les règles @font-face.

Oui — il reconnaît les URL du CDN Google Fonts et les associe aux noms des polices.

Oui, entièrement gratuit.

Absolument. Le Web Font Detector traite tout côté client, dans votre navigateur. Aucune donnée n'est téléversée ni stockée sur un serveur. Votre contenu reste privé sur votre appareil à tout moment.

Oui, le Web Font Detector est entièrement responsive et fonctionne sur les smartphones et tablettes. Vous pouvez l'utiliser sur tout appareil doté d'un navigateur web moderne, sans aucun téléchargement d'application.

Aucun compte ni inscription n'est nécessaire. Ouvrez simplement le Web Font Detector dans votre navigateur et commencez à l'utiliser immédiatement. Il n'y a ni page d'inscription ni restriction d'utilisation.

Le Web Font Detector fonctionne dans tous les navigateurs modernes, dont Chrome, Firefox, Safari, Edge et Opera. Pour une expérience optimale, utilisez la dernière version de votre navigateur préféré.

Une police système est déjà installée sur l'ordinateur du visiteur — Arial, Helvetica, Georgia, Segoe UI, ainsi que les mots-clés génériques serif, sans-serif et monospace — elle se charge donc instantanément sans rien à télécharger. Une police web est un fichier que le site lui-même fournit, déclaré dans une règle @font-face et hébergé aux côtés de la page ; le navigateur doit récupérer ce fichier avant que le texte ne s'affiche. Une Google Font est une police web livrée depuis le CDN de Google à fonts.googleapis.com, open source et libre d'utilisation selon sa licence. Le détecteur étiquette chaque typographie trouvée comme Google, Système, Personnalisée ou Inconnue, pour que vous sachiez d'un coup d'œil lesquelles nécessitent un téléchargement et lesquelles sont fournies gratuitement par l'appareil. Collez votre CSS ou HTML et le panneau récapitulatif compte chaque catégorie pour vous.

Ouvrez la page et récupérez son code source — utilisez « Afficher le code source » ou les DevTools de votre navigateur pour copier le balisage, ou copiez la feuille de style directement depuis un éditeur de code — puis collez-le dans le détecteur. L'analyseur scanne chaque déclaration font-family, le raccourci font comme dans « font: bold 16px/1.5 Georgia, serif », les blocs @font-face, ainsi que les URL Google Fonts via @import et <link>, puis résout les noms en une seule liste sans doublons. Chaque entrée indique le sélecteur ou le contexte dans lequel elle est apparue, afin que vous puissiez voir si une typographie est utilisée sur le body, un h1, ou un style en ligne. Lire les noms de famille exacts vaut toujours mieux que deviner une police à l'œil, mais n'oubliez pas que les polices web sont des ressources sous licence — vérifiez la licence avant de la réutiliser. Collez le code source d'un site ci-dessus pour voir sa liste complète de polices en quelques secondes.

Une police est étiquetée Inconnue lorsque son nom ne figure pas dans la liste intégrée d'environ cinquante polices système courantes et qu'elle n'a été rattachée ni à une URL de CDN Google Fonts, ni à une règle @font-face dans le code que vous avez collé. En pratique, cela signifie généralement une police web sous licence chargée d'une autre manière, une police auto-hébergée dont le bloc @font-face n'a pas été inclus dans l'extrait, ou tout simplement une faute de frappe dans le nom de famille. Ce n'est pas une erreur — l'outil vous indique qu'il a trouvé une véritable typographie nommée mais qu'il n'a pas pu confirmer sa provenance. Si une police que vous attendiez comme Personnalisée apparaît comme Inconnue, collez une plus grande partie de la feuille de style afin que le bloc @font-face correspondant soit inclus. Collez l'intégralité de votre CSS pour que chaque police soit classée aussi précisément que possible.

Une pile de polices est la valeur complète de font-family — une typographie principale suivie des solutions de repli que le navigateur essaie dans l'ordre, comme « Inter, -apple-system, Arial, sans-serif ». Une pile de polices non système est cette même liste débarrassée des solutions de repli système génériques, ne laissant que les typographies qu'une page charge réellement en tant que polices web. Le détecteur construit cette pile pour vous et propose une copie en un clic, ce qui est pratique lorsque vous voulez réutiliser les vraies typographies d'une mise en page sans traîner sa chaîne de secours, ou lorsque vous auditez précisément de quelles polices une page dépend. Réduire une pile aux seules polices dont vous avez réellement besoin est aussi un gain de performance, puisque chaque police web est un fichier que le navigateur doit télécharger. Collez votre code source et copiez la pile non système déjà prête dans les résultats.

Il détecte les deux, et bien plus encore. L'analyseur traite quatre types de références de polices et les fusionne en une seule liste : les blocs @font-face pour les polices auto-hébergées ou personnalisées, capturés avec leur nom de famille déclaré et l'URL src pour que vous puissiez voir d'où le fichier est chargé ; les règles Google Fonts @import url(...) et les balises <link> pointant vers fonts.googleapis.com, avec les noms extraits du paramètre family de l'URL ; les déclarations font-family standard dans toute règle CSS ou style en ligne ; et le raccourci font où la taille et la famille sont écrites ensemble. Les Google Fonts reçoivent un lien direct vers leur page de présentation, et les polices @font-face sont listées avec leur URL source. Comme tout s'exécute localement dans votre navigateur, l'outil fonctionne sur du code que vous collez plutôt que sur une URL en direct. Collez une feuille de style pour voir toutes les polices, quelle que soit la manière dont elles sont chargées.