Outil gratuit, sans inscription

Quelle police utilise ce site ?

Collez une URL pour voir les polices qu’utilise un site, avec leurs graisses, leurs tailles et l’endroit où chacune apparaît. Gratuit, sans inscription. Voyez des exemples concrets comme les polices d’Anthropic et les polices d’Airbnb, ou découvrez ce qu’un DESIGN.md apporte en plus.

Essayez

Utiliser ces polices dans votre code

Le détecteur vous donne les noms de familles, leurs graisses et le texte que chacune compose. Pour les réutiliser, chargez chaque famille une seule fois, attribuez une variable CSS à chaque rôle, et terminez toujours la pile par des polices de secours pour que le texte s’affiche pendant le téléchargement de la police ou si son chargement échoue.

1. Chargez la police. Pour une famille Google Fonts, ajoutez sa balise <link> ou utilisez next/font/google, et ne demandez que les graisses listées par le détecteur. Pour une police commerciale, achetez une licence web auprès de la fonderie et servez ses fichiers avec @font-face.

2. Nommez les rôles. Une variable par usage : display pour les titres, body pour le texte courant, mono pour le code. Remplacez les noms de familles par ceux que vous avez trouvés.

:root {
  --font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }
body { font-family: var(--font-body); font-weight: 400; }
code, pre { font-family: var(--font-mono); }

3. Utilisez-les dans Tailwind. Les mêmes piles deviennent les utilitaires font-display, font-sans et font-mono.

/* app.css, Tailwind CSS v4 */
@theme {
  --font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

Les familles ne sont que la moitié d’un système typographique. Les tailles, interlignages et espacements des lettres de chaque niveau se trouvent dans la section typographie d’un DESIGN.md, que votre agent de code peut appliquer à tous les écrans.

FAQ

Questions sur le détecteur de polices

Des réponses courtes sur l’outil gratuit Détecteur de polices de site web.

Il ouvre la page dans un vrai navigateur et lit la police calculée de chaque élément de texte visible : la famille réellement affichée par le navigateur, avec sa graisse et sa taille. Les familles sont ensuite regroupées et classées selon la quantité de texte qu’elles composent.

Non. Les polices sont des logiciels sous licence, et la licence d’un site ne couvre généralement que ce site. Si la famille est sur Google Fonts, vous pouvez l’y obtenir gratuitement ; sinon, cherchez sa fonderie et achetez une licence pour votre propre usage.

Il lit la seule page que vous saisissez et liste jusqu’à huit familles. Il ne voit que le texte que cette page affiche à un nouveau visiteur : le texte derrière une connexion, les pages qui bloquent les navigateurs automatisés et les lettrages dessinés en images ou en SVG ne sont pas lus, et leurs polices n’apparaissent donc pas.

Oui. Toute police web affichée par la page est détectée, qu’elle vienne de Google Fonts, d’Adobe Fonts ou des serveurs du site. Les polices Google sont prévisualisées dans leur vrai dessin ; les autres sont affichées dans une police de secours.

Oui, un élément à la fois. Dans Chrome ou Edge, faites un clic droit sur le texte, choisissez Inspecter et faites défiler l’onglet Calculé (Computed) jusqu’à Polices affichées (Rendered Fonts), qui indique la police réellement dessinée. Dans Firefox, le panneau Polices de l’Inspecteur liste les polices de l’élément sélectionné et toutes les polices chargées par la page.

Cet outil ne liste que les polices. Un DESIGN.md de Design Extractor couvre les couleurs, l’échelle typographique complète, les espacements et les règles de composants d’un site, dans un seul fichier que votre agent de code peut suivre.

Autres outils gratuits

Voir tous les outils gratuits

Besoin du design system complet ?

Obtenez un DESIGN.md avec les couleurs, l’échelle typographique, les espacements et les composants de n’importe quel site, prêt pour votre agent de code.

Obtenir un DESIGN.md