FontLens

Extensión gratis para Chrome

¿Qué fuente es esta? Haz clic derecho y mira el CSS

Selecciona texto en cualquier sitio web, haz clic derecho y elige «Inspect font with FontLens». El inspector se abre sobre la página y muestra la familia, el tamaño, el grosor, el interlineado y el color, el CSS listo para copiar y un botón para descargar la fuente.

Añadir a Chrome — gratis

También funciona en Edge, Brave, Opera y otros navegadores Chromium.

Inspector FontLens: muestra Ag entre las guías de altura de mayúsculas, altura x y línea base, propiedades de la fuente y un fragmento de Tailwind

De un vistazo

Qué hace
Muestra la fuente del texto que seleccionas: familia, tamaño, grosor, interlineado, color y otros estilos distintos al predeterminado, con el CSS listo para copiar.
Cómo empezar
Selecciona texto, haz clic derecho y elige «Inspect font with FontLens». La opción aparece solo cuando hay texto seleccionado.
Copiar como
CSS, SCSS, SASS o Tailwind, con el tamaño en px, rem, pt o em.
Archivo de fuente
«Download font» obtiene la fuente web desde su origen @font-face. Revisa la licencia antes de usarla.
Para quién
Diseñadores web, desarrolladores front-end, especialistas en accesibilidad y quienes están aprendiendo CSS.
Precio
Gratis. Sin cuenta ni versión de pago.
Datos
Funciona en tu navegador. Sin servidores ni analíticas. La única solicitud es la descarga de fuente que inicias.
Funciona en
Chrome y otros navegadores Chromium que instalan extensiones desde la Chrome Web Store. No es compatible con Firefox ni Safari.
Límites
Lee el CSS del texto real en páginas web. No lee texto en imágenes, canvas o PDF ni en páginas propias de Chrome.
Versión
2.2.0, actualizado el 23 de octubre de 2026

Dos clics para encontrar la fuente

  1. 1

    Selecciona texto

    Un encabezado, un párrafo o la etiqueta de un botón en cualquier página web.

  2. 2

    Haz clic derecho

    Elige «Inspect font with FontLens». El inspector se abre sobre la página y muestra la familia, el tamaño, el grosor, el interlineado y el color.

  3. 3

    Copia o ajusta

    Copia CSS o Tailwind, prueba otro tamaño o color en la vista previa en vivo, o descarga el archivo de la fuente.

Para qué lo usan

Aa

Identifica una tipografía

¿Te gustó un encabezado? Selecciónalo para ver la familia, el grosor y el origen de la fuente: Google Fonts, Adobe Fonts o el propio sitio.

{ }

Compara con una maqueta

Compara los valores de la página en vivo con el archivo de diseño y copia las reglas como CSS, SCSS, SASS o Tailwind.

4.5:1

Revisa el contraste

Consulta la relación de contraste con indicadores AA y AAA, y prueba un texto más oscuro o un fondo más claro antes de publicar el diseño.

Qué hace

  • Muestra con guías

    La primera familia de la pila, representada entre las guías de altura de mayúsculas, altura x y línea base, medidas directamente de la fuente.

  • Formatos de fragmento

    CSS, SCSS, SASS y Tailwind. Copia el fragmento completo o una línea; se recuerda el último formato que usaste.

  • Tus unidades

    Muestra el tamaño en px, rem, pt o em, tanto en los campos como en el fragmento. rem sigue el tamaño raíz de la página.

  • Origen de la fuente

    Una etiqueta indica de dónde viene: Google Fonts, Adobe Fonts, alojada en el sitio o una fuente del sistema de tu computadora.

  • Revisión de contraste

    Relación entre texto y fondo con indicadores AA y AAA para texto normal y grande; se actualiza al cambiar los colores.

  • Descargar fuente

    Obtiene el archivo del origen @font-face y lo nombra según la familia. Si el servidor lo bloquea, abre el origen en una pestaña nueva.

Por qué cuesta hallar una fuente con DevTools

Una página declara una lista de fuentes y el navegador usa la primera que tiene disponible. Para averiguar cuál es, abres DevTools, encuentras el elemento, revisas el panel Computed y luego buscas el archivo en Network. El tamaño, el grosor, el interlineado y el color están en distintos lugares.

FontLens lee el estilo calculado del texto que seleccionaste y lo reúne en un solo panel: la pila de familias, una muestra de la primera, los valores, el origen y el CSS. Lee el CSS de la página, así que no puede identificar fuentes dentro de imágenes.

Nada sale de tu navegador

  • Sin cuenta ni servidores

    FontLens funciona en tu navegador. Sin analíticas ni rastreo.

  • Lee lo que seleccionas

    El inspector lee los estilos del texto sobre el que hiciste clic derecho. No se envía información de la página.

  • Cuatro permisos

    Menú contextual para la opción del clic derecho, pestaña activa y acceso a la página para abrir el inspector, almacenamiento para el texto de muestra, la unidad y el formato.

Chrome DevTools vs. FontLens

Chrome DevTools vs. FontLensChrome DevToolsFontLens
Encontrar la fuente de un textoInspeccionar, encontrar el elemento y abrir ComputedSeleccionar texto, clic derecho y una opción
Copiar como Tailwind o SCSSNo, copiar los valores uno por unoPestaña de CSS, SCSS, SASS o Tailwind
De dónde viene la fuenteBuscar el archivo en el panel NetworkEtiqueta: Google Fonts, Adobe Fonts, sitio o sistema
Descargar el archivo de fuenteBuscarlo en Network o Sources y guardarloUn botón
Revisar el contrasteEn el selector de color del panel StylesIndicadores AA y AAA junto a una vista previa
PrecioIncluidoGratis

Preguntas frecuentes

¿Cómo averiguo qué fuente usa un sitio web?

Añade FontLens a Chrome, selecciona texto en el sitio, haz clic derecho y elige «Inspect font with FontLens». Verás la familia, el tamaño, el grosor, el interlineado, el color y el origen de la fuente.

¿Cómo copio el CSS de una fuente de un sitio web?

En el inspector, elige la pestaña CSS, SCSS, SASS o Tailwind y pulsa «Copy all», o copia una sola línea. Si lo necesitas, cambia antes la unidad a px, rem, pt o em.

¿Puedo descargar una fuente de un sitio web?

Si el texto usa una fuente web, «Download font» obtiene el archivo desde su origen @font-face. Las fuentes del sistema no tienen un archivo que descargar. Revisa la licencia antes de usarla en tu proyecto.

¿FontLens puede identificar una fuente en una imagen o PDF?

No. Lee el CSS del texto real en páginas web, así que no puede identificar fuentes en imágenes, canvas o PDF.

¿Cómo reviso el contraste del texto según WCAG?

La vista previa muestra la relación entre el color del texto y el fondo, con indicadores AA y AAA para texto normal y grande. Cambia cualquiera de los colores para actualizar los indicadores.

¿Puedo mostrar tamaños en rem en lugar de px?

Sí. Cambia la unidad a px, rem, pt o em; los campos y el fragmento se ajustan. rem se calcula a partir del tamaño de fuente raíz de la página y tu elección se recuerda.

¿Es gratis? ¿Recopila datos?

Es gratis y no requiere cuenta. No tiene servidores ni analíticas; la única solicitud es la descarga de fuente que inicias.

¿Funciona en Edge, Brave u Opera?

La mayoría de los navegadores Chromium pueden instalar extensiones de la Chrome Web Store, incluyendo Edge, Brave, Opera y Vivaldi. Firefox y Safari no son compatibles.

Más extensiones gratuitas de PYROCTAL

¿Qué fuente es esa? En dos clics.

Añadir a Chrome — gratis