FontLens

Extension gratuite pour Chrome

Quelle est cette police ? Clic droit pour voir le CSS

Sélectionnez un texte sur n’importe quel site, faites un clic droit et choisissez « Inspect font with FontLens ». L’inspecteur s’affiche sur la page avec la famille, la taille, l’épaisseur, l’interligne et la couleur, le CSS à copier et un bouton pour télécharger la police.

Ajouter à Chrome — gratuit

Fonctionne aussi avec Edge, Brave, Opera et autres navigateurs Chromium.

Inspecteur FontLens : spécimen Ag entre les repères de hauteur des capitales, hauteur d’x et ligne de base, propriétés de police et extrait Tailwind

En bref

À quoi ça sert
Affiche la police du texte sélectionné : famille, taille, épaisseur, interligne, couleur et autres styles différents des valeurs par défaut, avec le CSS prêt à copier.
Pour commencer
Sélectionnez un texte, faites un clic droit et choisissez « Inspect font with FontLens ». L’option apparaît uniquement lorsqu’un texte est sélectionné.
Copie au format
CSS, SCSS, SASS ou Tailwind, avec la taille en px, rem, pt ou em.
Fichier de police
« Download font » récupère la police Web depuis sa source @font-face. Vérifiez sa licence avant de l’utiliser.
Pour qui
Designers Web, développeurs front-end, spécialistes de l’accessibilité et personnes qui apprennent le CSS.
Prix
Gratuit. Sans compte ni version payante.
Données
Tout fonctionne dans votre navigateur. Aucun serveur ni outil d’analyse. La seule requête est le téléchargement de police que vous lancez.
Navigateurs compatibles
Chrome et les autres navigateurs Chromium qui installent des extensions depuis le Chrome Web Store. Firefox et Safari ne sont pas pris en charge.
Limites
Lit le CSS du vrai texte sur les pages Web. Pas le texte des images, des canvas ou des PDF, ni celui des pages propres à Chrome.
Version
2.2.0, mis à jour le 23 octobre 2026

Deux clics pour trouver la police

  1. 1

    Sélectionnez un texte

    Un titre, un paragraphe ou le libellé d’un bouton sur n’importe quelle page Web.

  2. 2

    Faites un clic droit

    Choisissez « Inspect font with FontLens ». L’inspecteur s’affiche sur la page avec la famille, la taille, l’épaisseur, l’interligne et la couleur.

  3. 3

    Copiez ou ajustez

    Copiez le CSS ou Tailwind, testez une autre taille ou couleur dans l’aperçu, ou téléchargez le fichier de police.

Pourquoi l’utiliser

Aa

Trouver le nom d’une police

Un titre vous plaît ? Sélectionnez-le pour voir la famille, l’épaisseur et la source : Google Fonts, Adobe Fonts ou le site lui-même.

{ }

Comparer à une maquette

Comparez les valeurs de la page en direct avec le fichier de design, puis copiez les règles en CSS, SCSS, SASS ou Tailwind.

4.5:1

Vérifier le contraste

Consultez le rapport avec les indicateurs AA et AAA et testez un texte plus sombre ou un fond plus clair avant la mise en ligne.

Fonctionnalités

  • Spécimen avec repères

    Première famille de la pile, représentée entre les repères de hauteur des capitales, hauteur d’x et ligne de base mesurés sur la police.

  • Formats d’extrait

    CSS, SCSS, SASS et Tailwind. Copiez tout l’extrait ou une ligne ; votre dernier format reste mémorisé.

  • Vos unités

    Affichez la taille en px, rem, pt ou em dans les champs et l’extrait. rem suit la taille racine de la page.

  • Source de la police

    Un badge indique la source : Google Fonts, Adobe Fonts, hébergée par le site ou installée sur votre ordinateur.

  • Vérification du contraste

    Rapport entre le texte et le fond, avec les indicateurs AA et AAA pour le texte normal ou grand. Il se met à jour quand vous changez les couleurs.

  • Télécharger la police

    Récupère le fichier depuis la source @font-face et le nomme d’après la famille. Si le serveur bloque la requête, la source s’ouvre dans un nouvel onglet.

Pourquoi DevTools complique la recherche de police

Une page déclare une liste de polices et le navigateur utilise la première qu’il possède. Pour la trouver, vous ouvrez DevTools, repérez l’élément, consultez le panneau Computed, puis cherchez le fichier dans Network. Taille, épaisseur, interligne et couleur sont répartis à différents endroits.

FontLens lit le style calculé du texte sélectionné et rassemble tout dans un panneau : la pile de familles, un spécimen de la première, les valeurs, la source et le CSS. Il lit le CSS de la page et ne peut donc pas nommer une police dans une image.

Vos données restent dans le navigateur

  • Sans compte ni serveur

    FontLens fonctionne dans votre navigateur. Pas d’analyse ni de suivi.

  • Lit votre sélection

    L’inspecteur lit les styles du texte sur lequel vous avez fait un clic droit. Aucune information sur la page n’est envoyée.

  • Quatre autorisations

    Menu contextuel pour l’option du clic droit, onglet actif et accès à la page pour ouvrir l’inspecteur, stockage pour votre texte d’exemple, unité et format d’extrait.

Chrome DevTools ou FontLens

Chrome DevTools ou FontLensChrome DevToolsFontLens
Trouver la police d’un texteInspecter, trouver l’élément et ouvrir ComputedSélectionner le texte, clic droit, une option
Copier en Tailwind ou SCSSNon, copier les valeurs une par uneOnglet CSS, SCSS, SASS ou Tailwind
Origine de la policeChercher le fichier dans NetworkBadge : Google Fonts, Adobe Fonts, site ou système
Télécharger le fichier de policeLe trouver dans Network ou Sources et l’enregistrerUn bouton
Vérifier le contrasteDans le sélecteur de couleur du panneau StylesIndicateurs AA et AAA à côté de l’aperçu
PrixInclusGratuit

Questions

Comment trouver la police utilisée par un site Web ?

Ajoutez FontLens à Chrome, sélectionnez un texte sur le site, faites un clic droit et choisissez « Inspect font with FontLens ». Vous verrez la famille, la taille, l’épaisseur, l’interligne, la couleur et la source de la police.

Comment copier le CSS d’une police depuis un site ?

Dans l’inspecteur, choisissez l’onglet CSS, SCSS, SASS ou Tailwind et appuyez sur « Copy all », ou copiez une ligne. Changez d’abord l’unité en px, rem, pt ou em si besoin.

Puis-je télécharger une police depuis un site Web ?

Si le texte utilise une police Web, « Download font » récupère le fichier depuis sa source @font-face. Une police système n’a pas de fichier à télécharger. Vérifiez la licence avant de l’utiliser dans votre projet.

FontLens peut-il identifier une police dans une image ou un PDF ?

Non. Il lit le CSS du vrai texte sur les pages Web : il ne peut pas nommer les polices dans les images, les canvas ou les PDF.

Comment vérifier le contraste du texte selon WCAG ?

L’aperçu affiche le rapport entre la couleur du texte et celle du fond, avec les indicateurs AA et AAA pour du texte normal ou grand. Changez l’une des couleurs pour les mettre à jour.

Puis-je afficher les tailles en rem plutôt qu’en px ?

Oui. Choisissez px, rem, pt ou em : les champs et l’extrait suivent. rem est calculé à partir de la taille de police racine de la page, et votre choix est mémorisé.

Est-ce gratuit ? Est-ce que l’extension collecte des données ?

C’est gratuit et sans compte. Aucun serveur ni outil d’analyse ; la seule requête est le téléchargement de police que vous lancez.

Est-ce que ça marche avec Edge, Brave ou Opera ?

La plupart des navigateurs Chromium peuvent installer des extensions du Chrome Web Store, y compris Edge, Brave, Opera et Vivaldi. Firefox et Safari ne sont pas pris en charge.

Plus d'extensions gratuites de PYROCTAL

Quelle est cette police ? Deux clics suffisent.

Ajouter à Chrome — gratuit