Famille et graisses chargées
Savoir de quelles variantes vous avez besoin, pas seulement le nom
Typographie
Quelle police utilise un site web, avec sa licence et son échelle
Smart Design Inspector montre quelles polices utilise un site web, leurs graisses, d’où elles sont chargées (Google Fonts, Adobe Fonts ou le serveur du site), leur licence et l’échelle typographique de la page : chaque style avec sa taille, sa graisse et son interligne.
Polices, origine, licence et échelle : gratuit pour toujours
Polices · votreclient.example
- Inter300 · 400 · 500 · 600Google FontsOFL
- Playfair Display400 · 400 italique · 700Google FontsOFL
- JetBrains Mono400Auto-hébergéeOFL
- H164 px · 500 · 1,04
- H236 px · 500 · 1,1
- H317 px · 500 · 1,3
- Corps16 px · 300 · 1,55
- Bouton15 px · 500 · 1
01
Comment savoir quelle police utilise un site web
3 étapes- 01
Installez Smart Design Inspector et ouvrez le site web.
- 02
Cliquez sur l’icône et choisissez Polices.
- 03
Vous voyez la liste des familles avec leurs graisses et leur origine. Survolez un texte pour voir son style exact.
Sans extension
C’est aussi possible sans extension : clic droit sur le texte, Inspecter, puis cherchez font-family dans le panneau des styles. Le problème, c’est que font-family indique la police demandée, pas si elle a été chargée, d’où elle vient ni quelle est sa licence.
02
Essayez-le sur cette page
Sans installationUn site web d’exemple et le panneau des polices, sans rien installer. Survolez un texte, ou choisissez-le dans la liste, et voyez sa famille, sa graisse, sa taille, son interligne, son origine et sa licence.
Choisissez un élément
Smart Design Inspector · Policesh1.hero-title
- Famille
- —
- Graisse
- —
- Style
- —
- Taille
- —
- Interligne
- —
- Approche
- —
- Origine
- —
- Licence
- —
Familles de la page
—
Site d’exemple · les valeurs sont lues sur cette page
03
Plus que le nom de la police
4 informationsOrigine : Google Fonts, Adobe Fonts ou auto-hébergée
Savoir si vous pouvez l’utiliser gratuitement ou s’il faut l’acheter
Licence
Celles de Google Fonts sont sous OFL. Pour les autres, on lit la licence déclarée dans le fichier lui-même
Échelle typographique
H1 à H6, corps de texte et boutons avec taille, graisse, interligne et approche
L’échelle est ce qu’il vous faut pour reproduire le style, et les extensions de polices regardent lettre par lettre. Avec la version Pro, vous l’exportez vers Tailwind ou des variables CSS : extraire le design system.
| Gratuit0 €pour toujours | Pro49 €paiement unique | |
|---|---|---|
| Polices de la page : famille, graisses, tailles, origine et licence | ||
| Échelle typographique : chaque style de texte avec police, taille, graisse, interligne et approche | ||
| Exporter les styles typographiques vers Tailwind v4 @theme, des variables CSS ou DESIGN_SPECS.md | — | Accès anticipé gratuit |
05
Ce qu’il ne fait pas
LimitesIl ne télécharge pas les polices payantes. Il vous montre la licence et où les obtenir. Si la police est sous licence libre, vous pouvez la télécharger. Il n’identifie pas non plus les polices à partir d’une image : pour cela, il existe des outils comme WhatTheFont.
Est-ce gratuit ?
Oui. Voir les polices, leur origine, leur licence et l’échelle est gratuit pour toujours.
Détecte-t-il les polices Adobe Fonts ?
Oui. Il détecte celles qui sont chargées depuis Adobe grâce à l’adresse d’où elles proviennent.
Et si le site utilise une police système ?
L’extension indique qu’aucune police web n’est chargée et affiche la famille déclarée.
Puis-je utiliser la police que je trouve ?
Cela dépend de sa licence. Les polices Google Fonts peuvent être utilisées dans n’importe quel projet. Les polices commerciales doivent être achetées, même si un autre site les utilise.
Fonctionne-t-il avec le texte dans les images ?
Non. Il lit le texte de la page, pas celui qui se trouve dans une image.
Sur quels navigateurs et systèmes fonctionne-t-elle ?
Sur Chrome, Edge, Brave, Arc, Opera et Vivaldi, sous Windows, Mac et Linux, dès la 1.0. Elle fonctionne partout de la même façon, car c’est le navigateur qui exécute l’extension, pas le système. Le code est prêt à être porté sur Firefox et Safari sans réécriture. Pendant le développement, des changements sont possibles.
07
Continuer avec
Fonctions prochesCouleurs
La palette de la page, une pipette et le contraste WCAG de chaque paire texte/fond.
Couleurs d’un site web →Design system
Couleurs, espacements et typographie vers Tailwind v4 @theme, des variables CSS ou DESIGN_SPECS.md.
Extraire le design system →Inspecteur CSS
Survolez et voyez le CSS calculé, la boîte, les marges et les distances.
Inspecteur CSS →Liste d’attente
Soyez parmi les premiers à l’essayer
Smart Design Inspector est en cours de développement. Laissez-nous votre e-mail et nous vous préviendrons le jour de sa sortie sur le Chrome Web Store, avec les 7 fonctions Pro gratuites en accès anticipé.
Un e-mail le jour du lancement et très peu d’autres · Désinscription en un clic