Aa
Descubre una tipografía
¿Viste un encabezado que te gustó? Selecciónalo para conocer la familia, el grosor y su procedencia: Google Fonts, Adobe Fonts o el sitio que la publica.
Extensión gratis para Chrome
¿Cuál es esta fuente? Haz clic derecho y copia el CSS
Marca cualquier texto de una página, haz clic derecho y selecciona «Inspect font with FontLens». El inspector aparece encima del sitio con la familia, el tamaño, el grosor, el interlineado y el color. Copia el CSS o usa el botón para bajar el archivo de fuente.
También funciona en Edge, Brave, Opera y otros navegadores Chromium.
En resumen
- Qué puedes hacer
- Consulta la tipografía del texto marcado: familia, tamaño, grosor, interlineado, color y estilos que cambian respecto al valor predeterminado. El CSS queda listo para copiar.
- Cómo usarlo
- Selecciona texto, haz clic derecho y elige «Inspect font with FontLens». La opción solo aparece cuando seleccionas texto.
- Opciones para copiar
- CSS, SCSS, SASS o Tailwind; el tamaño puede mostrarse en px, rem, pt o em.
- Archivo de la fuente
- «Download font» busca la fuente web en su regla @font-face. Confirma que la licencia permita usarla.
- A quién le sirve
- Diseñadores web, desarrolladores front-end, personas que revisan accesibilidad y quienes aprenden CSS.
- Costo
- Gratis. No requiere cuenta y no tiene una versión de pago.
- Información
- Se ejecuta en tu navegador. No usa servidores ni analíticas. La única solicitud ocurre cuando inicias una descarga de fuente.
- Compatibilidad
- Chrome y otros navegadores Chromium que permiten instalar desde la Chrome Web Store. No funciona con Firefox ni Safari.
- Qué no hace
- Lee el CSS de texto real en sitios web. No detecta texto en imágenes, canvas o PDF, ni en las páginas internas de Chrome.
- Versión
- 2.2.0, actualizada 23 de octubre de 2026
Encuentra la fuente en dos clics
- 1
Marca el texto
Puede ser un título, un párrafo o el texto de un botón en cualquier sitio.
- 2
Haz clic derecho
Selecciona «Inspect font with FontLens». El panel aparece sobre la página con la familia, el tamaño, el grosor, el interlineado y el color.
- 3
Copia o modifica
Copia CSS o Tailwind, prueba un tamaño o color distinto en la previsualización o descarga el archivo de fuente.
Ideas para aprovecharlo
{ }
Revisa una maqueta
Compara las medidas del sitio abierto con tu archivo de diseño y exporta las reglas como CSS, SCSS, SASS o Tailwind.
4.5:1
Mide el contraste
Consulta el nivel de contraste AA o AAA y ajusta el texto a un tono más oscuro o el fondo a uno más claro antes de publicar.
Funciones
Muestra tipográfica con guías
La primera familia de la lista aparece entre guías de altura de mayúsculas, altura x y línea base, calculadas a partir de la propia fuente.
Formatos de código
CSS, SCSS, SASS y Tailwind. Copia todo el código o solo una línea; FontLens recuerda el último formato elegido.
Unidades a tu gusto
Usa px, rem, pt o em en los campos y en el fragmento. rem toma como referencia el tamaño raíz definido por la página.
Procedencia de la fuente
Una insignia señala si viene de Google Fonts, Adobe Fonts, el propio sitio o una fuente instalada en tu computadora.
Medidor de contraste
Calcula el contraste entre texto y fondo con niveles AA y AAA para texto normal y grande. El resultado cambia al ajustar los colores.
Descargar la tipografía
Obtiene el archivo de la regla @font-face y lo guarda con el nombre de la familia. Si el servidor impide la descarga, abre la fuente en otra pestaña.
Por qué DevTools dificulta encontrar la fuente
Cada página puede declarar varias fuentes; el navegador usa la primera que tiene disponible. Para encontrarla, abres DevTools, ubicas el elemento, revisas Computed y después buscas el archivo en Network. El tamaño, el grosor, el interlineado y el color aparecen en distintas secciones.
FontLens consulta el estilo calculado del texto que seleccionaste y lo organiza en un solo panel: la lista de familias, una muestra de la primera, sus valores, la procedencia y el CSS. Como analiza el CSS de la página, no puede reconocer fuentes dentro de imágenes.
Tu actividad se queda en el navegador
Sin cuenta ni servidores
FontLens corre localmente en tu navegador. No recopila analíticas ni te rastrea.
Solo lee tu selección
El inspector consulta los estilos del texto que marcaste con clic derecho. No manda información de la página a ningún lado.
Cuatro permisos
Menú contextual para la opción de clic derecho, pestaña activa y acceso al sitio para abrir el inspector, y almacenamiento para conservar el texto de muestra, la unidad y el formato.
Chrome DevTools frente a FontLens
| Chrome DevTools frente a FontLens | Chrome DevTools | FontLens |
|---|---|---|
| Consultar la fuente de un texto | Inspeccionar y encontrar el elemento en Computed | Marcar texto, clic derecho y elegir una opción |
| Copiar estilos como Tailwind o SCSS | No; hay que copiar cada valor por separado | Pestaña CSS, SCSS, SASS o Tailwind |
| Ver el origen de la fuente | Buscar el archivo tipográfico en Network | Indicador de Google Fonts, Adobe Fonts, sitio o sistema |
| Bajar el archivo tipográfico | Localizarlo en Network o Sources y guardarlo | Un botón |
| Comprobar el contraste | En el selector de color de Styles | Niveles AA y AAA junto a la previsualización |
| Costo | Incluido | Gratis |
Preguntas frecuentes
¿Cómo puedo saber qué tipografía usa una página web?
Instala FontLens en Chrome, selecciona texto en la página, haz clic derecho y elige «Inspect font with FontLens». Verás la familia, el tamaño, el grosor, el interlineado, el color y de dónde viene la fuente.
¿Cómo copio el CSS de una fuente que vi en un sitio?
Abre la pestaña CSS, SCSS, SASS o Tailwind en el inspector y presiona «Copy all», o copia una sola línea. Antes puedes cambiar la unidad a px, rem, pt o em.
¿Se puede descargar una fuente de una página web?
Si el texto usa una fuente web, «Download font» obtiene el archivo desde su regla @font-face. Las fuentes del sistema no tienen archivo descargable. Revisa la licencia antes de usarla en tu proyecto.
¿FontLens reconoce una fuente dentro de una imagen o PDF?
No. Analiza el CSS de texto real en páginas web, así que no identifica fuentes en imágenes, canvas o PDF.
¿Cómo verifico el contraste de texto para WCAG?
La previsualización muestra la proporción entre el color del texto y el fondo, con niveles AA y AAA para texto normal o grande. Al cambiar un color, el nivel se actualiza.
¿Puedo ver los tamaños en rem y no en px?
Sí. Elige px, rem, pt o em y el cambio se refleja en los campos y el código. rem se calcula con el tamaño de fuente raíz de la página; tu preferencia queda guardada.
¿Cuesta algo? ¿Se guardan mis datos?
Es gratis y no requiere cuenta. No usa servidores ni analíticas; la única solicitud es cuando inicias una descarga de fuente.
¿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. No es compatible con Firefox ni Safari.
Más extensiones gratis de PYROCTAL
Captura de Página CompletaCaptura de página completa con un clic o atajo: captura con desplazamiento de una página o app web entera, guardada como PNG.
Selector de color sencilloCuentagotas selector de color con lupa: haz clic en cualquier píxel, copia HEX, RGB o HSL, reutiliza tus últimas 50 muestras.
YouTube Auto QualityConfigura automáticamente la calidad de video preferida en YouTube. Ahorra datos o disfruta HD/4K cada vez.
Guardar imagen como JPEGGuarda cualquier imagen como JPG con un clic derecho: WebP, PNG, AVIF, GIF, SVG y más se convierten a una foto normal.