FontLens

Extensió gratuïta per a Chrome

Quina és aquesta font? Fes clic dret i consulta el CSS

Selecciona text en qualsevol web, fes clic dret i tria Inspect font with FontLens. S'obrirà un inspector tipogràfic sobre la pàgina amb la família, la mida, el pes, l'alçada de línia i el color, el CSS a punt per copiar i un botó per baixar la font.

Afegeix a Chrome — gratis

També funciona a Edge, Brave, Opera i altres navegadors basats en Chromium.

L'inspector FontLens: la mostra Ag entre les guies d'alçada de majúscules, altura x i línia de base, les propietats de la font i un fragment de Tailwind

D'un cop d'ull

Què fa
Mostra la font del text que selecciones: família, mida, pes, alçada de línia, color i altres estils diferents dels predeterminats, amb el CSS a punt per copiar.
Com començar
Selecciona text, fes clic dret i tria Inspect font with FontLens. L'opció del menú només apareix quan hi ha text seleccionat.
Copia com a
CSS, SCSS, SASS o Tailwind, amb la mida en px, rem, pt o em.
Fitxer de la font
Download font obté la font web des del seu origen @font-face. Consulta'n la llicència abans de fer-la servir.
Per a qui és
Dissenyadors web, desenvolupadors front-end, auditors d'accessibilitat i estudiants de CSS.
Preu
Gratis. Sense comptes ni versió de pagament.
Dades
Funciona al teu navegador. Sense servidors ni analítica. L'única petició és la baixada de la font que inicies.
Funciona a
Chrome i altres navegadors basats en Chromium que instal·len des de la Chrome Web Store. No és compatible amb Firefox ni Safari.
Límits
Llegeix el CSS del text real de les pàgines web. No pot llegir text d'imatges, canvas o PDF, ni de les pàgines pròpies de Chrome.
Versió
2.2.0, actualitzada el 23 d’octubre del 2026

Dos clics fins a la font

  1. 1

    Selecciona text

    Un títol, un paràgraf o l'etiqueta d'un botó de qualsevol pàgina web.

  2. 2

    Fes clic dret

    Tria Inspect font with FontLens. L'inspector s'obre sobre la pàgina i mostra la família, la mida, el pes, l'alçada de línia i el color.

  3. 3

    Copia o ajusta

    Copia el CSS o Tailwind, prova una altra mida o color a la previsualització en directe o baixa el fitxer de la font.

Per què la fan servir

Aa

Identifica la tipografia

Has vist un titular que t'agrada? Selecciona'l per veure la família, el pes i d'on surt la font: Google Fonts, Adobe Fonts o el mateix web.

{ }

Compara amb una maqueta

Compara els valors de la pàgina en directe amb el fitxer de disseny i copia les regles com a CSS, SCSS, SASS o Tailwind.

4.5:1

Comprova el contrast

Consulta la relació de contrast amb indicadors AA i AAA i prova un text més fosc o un fons més clar abans de publicar el disseny.

Què fa

  • Mostra amb guies

    La primera família de la pila, dibuixada entre les guies d'alçada de majúscules, altura x i línia de base, mesurades a partir de la mateixa font.

  • formats de fragment

    CSS, SCSS, SASS i Tailwind. Copia el fragment sencer o una línia; es recorda l'últim format que has fet servir.

  • Les teves unitats

    Mostra la mida en px, rem, pt o em als camps i al fragment. rem segueix la mida d'arrel de la pàgina.

  • Origen de la font

    Una etiqueta indica d'on surt la font: Google Fonts, Adobe Fonts, allotjada al web o una font del sistema del teu ordinador.

  • Comprovació del contrast

    La relació entre text i fons amb indicadors AA i AAA per a text normal i gran, que s'actualitza quan canvies els colors.

  • Download font

    Obtén el fitxer des de l'origen @font-face i li posa el nom de la família. Si el servidor ho bloqueja, l'origen s'obre en una pestanya nova.

Per què costa tant trobar una font amb DevTools

Una pàgina declara una llista de fonts i el navegador fa servir la primera que té. Per saber quina és, obres DevTools, trobes l'element, mires el panell Computed i després busques el fitxer al panell Network. La mida, el pes, l'alçada de línia i el color són en llocs diferents.

FontLens llegeix l'estil calculat del text seleccionat i el reuneix en un sol panell: la pila de famílies, una mostra de la primera, els valors, l'origen de la font i el CSS. Com que llegeix el CSS de la pàgina, no pot identificar una font dins d'una imatge.

Res no surt del teu navegador

  • Sense comptes ni servidors

    FontLens funciona al teu navegador. Sense analítica ni seguiment.

  • Llegeix el que selecciones

    L'inspector llegeix els estils del text on has fet clic dret. No s'envia enlloc cap informació de la pàgina.

  • Quatre permisos

    Menú contextual per a l'opció de clic dret, pestanya activa i accés a la pàgina per obrir l'inspector, i emmagatzematge per al text de mostra, la unitat i el format del fragment.

Chrome DevTools o FontLens

Chrome DevTools o FontLensChrome DevToolsFontLens
Trobar la font d'un textInspecciona, troba l'element i obre el panell ComputedSelecciona text, fes clic dret i tria una opció
Copia com a Tailwind o SCSSNo, copia els valors d'un en unPestanya CSS, SCSS, SASS o Tailwind
D'on surt la fontBusca el fitxer al panell NetworkUna etiqueta: Google Fonts, Adobe Fonts, allotjada al web o del sistema
Baixar el fitxer de la fontTroba'l a Network o Sources i desa'lUn botó
Comprovar el contrastAl selector de color del panell StylesIndicadors AA i AAA al costat d'una previsualització en directe
PreuIntegratGratis

Preguntes

Com puc saber quina font fa servir una web?

Afegeix FontLens a Chrome, selecciona text del web, fes clic dret i tria Inspect font with FontLens. Veuràs la família, la mida, el pes, l'alçada de línia, el color i d'on surt la font.

Com puc copiar el CSS d'una font d'una web?

A l'inspector, tria la pestanya CSS, SCSS, SASS o Tailwind i prem Copy all, o copia una sola línia. Si et cal, canvia abans la unitat a px, rem, pt o em.

Puc baixar una font d'una web?

Si el text fa servir una font web, Download font obté el fitxer des del seu origen @font-face. Les fonts del sistema no tenen cap fitxer per baixar. Consulta'n la llicència abans de fer-la servir al teu projecte.

FontLens pot identificar una font d'una imatge o un PDF?

No. Llegeix el CSS del text real de les pàgines web, així que no pot identificar fonts d'imatges, canvas o PDF.

Com puc comprovar el contrast del text segons WCAG?

La previsualització mostra la relació de contrast entre el text i el fons, amb indicadors AA i AAA per a text normal i gran. Canvia qualsevol dels colors i els indicadors s'actualitzaran.

Pot mostrar les mides en rem en lloc de px?

Sí. Canvia la unitat a px, rem, pt o em i els camps i el fragment s'hi adaptaran. rem es calcula a partir de la mida d'arrel de la pàgina i es recorda la teva tria.

És gratis? Recull dades?

És gratis i no cal crear cap compte. No té servidors ni analítica; l'única petició és la baixada de la font que inicies.

Funciona a Edge, Brave o Opera?

La majoria de navegadors basats en Chromium poden instal·lar extensions de la Chrome Web Store, com ara Edge, Brave, Opera i Vivaldi. No és compatible amb Firefox ni Safari.

Més extensions gratuïtes de PYROCTAL

Quina és aquesta font? Dos clics.

Afegeix a Chrome — gratis