Polices

Trouvez quelles polices utilise un site web

Design Snap est une extension Chrome gratuite qui identifie toutes les polices utilisées sur une page web — pas seulement celle sous votre curseur. Elle liste les familles personnalisées, filtre les polices génériques de repli, et vous donne toute l'échelle typographique : tailles, graisses et interlignages. Puis elle exporte la typo en Tailwind, variables CSS, JSON ou Figma.

Ajouter à Chrome — gratuit Voir le tarif PRO

Noté 5,0/5 sur le Chrome Web Store · lire les avis · Plan gratuit · Sans compte · Analyse 100 % locale

Comment identifier la police d'un site internet

Identifier les polices d'un site se fait en trois étapes. Design Snap lit les font-family, font-size, font-weight et line-height calculés pour chaque élément de texte de la page, puis les regroupe en système typographique.

  1. Installer

    Ajoutez Design Snap à Chrome depuis le Chrome Web Store. Plan gratuit, sans compte.

  2. Extraire

    Ouvrez le site et cliquez sur Extraire. L'onglet Typographie liste chaque famille personnalisée, avec les tailles et graisses réellement utilisées.

  3. Inspecter ou exporter

    Survolez un élément avec l'inspecteur pour vérifier ses styles calculés, ou exportez toute l'échelle typo en Tailwind, variables CSS, JSON ou tokens Figma.

Pourquoi un détecteur de police devrait regarder toute la page

Les outils classiques d'identification de police fonctionnent élément par élément : on survole un titre, on lit « Inter 48px ». Ça répond à « c'est quoi cette police ? », mais pas à la question suivante : quel est le système typographique de ce site ? Combien de familles, quelles graisses, quelle échelle du texte courant au grand titre.

Design Snap répond aux deux. L'inspecteur affiche les styles de n'importe quel élément au survol, et l'extraction vous donne tout le système d'un coup : chaque famille, toutes les tailles de la page dédoublonnées en échelle (par exemple 12 · 14 · 16 · 20 · 24 · 32) et les graisses réellement utilisées.

Uniquement les polices personnalisées — sans le bruit des polices de repli

Une déclaration font-family est une pile : "Inter", system-ui, -apple-system, sans-serif. Lister tous les noms de toutes les piles noie la vraie réponse. Design Snap garde les familles personnalisées et filtre les polices génériques et système : la police qui définit la marque apparaît en premier.

De « quelle est cette police ? » à une échelle typo utilisable

Une fois les polices connues, l'export les transforme en code : un bloc fontFamily et fontSize pour tailwind.config.js, des variables CSS --font-sans, des tokens Figma, ou des tokens typographiques composites Style Dictionary v3 (PRO).

Ce que Design Snap ne fait pas

Il identifie les polices affichées en texte sur les pages web. Il ne reconnaît pas une police dans une image ou un logo — pour ça, un outil d'identification par image qui compare la forme des glyphes est plus adapté. Et il ne télécharge pas les fichiers de police : beaucoup de polices web sont sous licence, vérifiez auprès de la fonderie ou de Google Fonts avant d'en utiliser une.

Tout le système typo, pas une étiquette

Les outils de survol vous donnent le nom d'une police. Design Snap vous montre comment le site l'utilise.

  • Chaque famille personnalisée de la page, polices de repli filtrées
  • Tailles de police dédoublonnées en échelle typographique
  • Graisses et interlignages réellement utilisés
  • Inspecteur d'éléments pour un élément précis
  • Export Tailwind, variables CSS, JSON, Figma ou Style Dictionary
Design Snap ancré dans le panneau latéral de Chrome à côté de discord.com, gardant le thème et les tokens extraits sous les yeux pendant la navigation

Trouver la police d'un site — FAQ

Installez l'extension Chrome Design Snap, ouvrez le site et cliquez sur Extraire. L'onglet Typographie liste chaque famille de polices personnalisée de la page, avec tailles, graisses et interlignages. Pour un élément précis, survolez-le avec l'inspecteur.

Non. Design Snap lit les polices que le navigateur utilise pour afficher du texte. Un texte intégré dans une image ou un logo ne contient aucune information de police dans la page : un outil d'identification par image est alors plus adapté.

Design Snap ne télécharge pas les fichiers de police. La plupart des polices web sont sous licence : une fois le nom connu, récupérez-la auprès de la fonderie ou d'une bibliothèque comme Google Fonts avec la bonne licence.

Oui. L'identification des polices, l'inspecteur et les exports Tailwind, variables CSS, JSON et Figma font partie du plan gratuit de Design Snap.

WhatFont identifie la police de l'élément survolé. Design Snap extrait en plus tout le système typographique de la page et l'exporte en code. Voir la page alternative à WhatFont pour une comparaison détaillée.

Alternative à WhatFont

Quand WhatFont suffit, et quand il faut tout le système typo.

Extraire un design system

Couleurs, typo, radius, ombres et variables en un clic.

Générateur de thème Tailwind

Les polices et couleurs d'un site en tailwind.config.js.

Extracteur de palette

Les couleurs d'un site classées par usage réel.