Tabla de contenidos
Cuándo una extensión para fuentes es la herramienta correcta
Una extensión funciona mejor cuando puedes abrir la página original y pasar el cursor sobre texto HTML real. En ese caso el navegador ya conoce la pila de fuentes, el tamaño calculado, el peso, la altura de línea y el color.
No es lo mismo que identificar una fuente desde una imagen estática. Si el texto está dentro de un logo, cartel, captura, anuncio, exportación de Canva o PDF plano, la extensión no tiene CSS que leer. Necesitas comparación visual con IA.
Regla práctica
Si puedes seleccionar el texto, empieza con una extensión. Si solo ves píxeles, sube la imagen a Font Detector.
Mejores extensiones para identificar fuentes
Casi todas hacen lo básico, pero cambian en velocidad, detalle y comodidad. Elige la simple si solo necesitas el nombre; usa una opción completa si comparas tipografía a menudo.
| Extensión | Ideal para | Muestra | Límites |
|---|---|---|---|
| WhatFont | Comprobaciones rápidas en webs | Familia, tamaño, peso, color y detalles básicos | Poco útil para texto dentro de imágenes |
| Fonts Ninja | Diseñadores que comparan varias fuentes | Detalles, vistas previas y fuentes detectadas | Interfaz más amplia de lo necesario para uso casual |
| Fontanello | Desarrolladores que quieren datos CSS | Familia, peso, tamaño, color y propiedades CSS | Depende de texto seleccionable |
| DevTools | Verificación final | CSS calculado y fuente renderizada | Más lento que una extensión |
Cómo usar una extensión para identificar fuentes
La interfaz cambia, pero el flujo suele ser el mismo:
- Instala una extensión fiable desde la tienda oficial del navegador.
- Abre la página donde aparece la fuente.
- Activa la extensión y pasa el cursor o haz clic sobre el texto.
- Anota familia, peso, tamaño, altura de línea, color y fuentes de respaldo.
- Si ves una fuente genérica, confirma el resultado en DevTools.
No te quedes con el primer nombre
Muchas pilas CSS incluyen varias fuentes, como Inter, Arial, sans-serif. La primera suele ser la intención, pero el navegador puede usar una alternativa si la webfont falla.
Cómo verificar una fuente web con DevTools
Cuando la decisión de diseño depende de la tipografía exacta, usa la extensión como atajo y DevTools como confirmación.
- Haz clic derecho en el texto y elige Inspeccionar.
- Selecciona el elemento que contiene el texto visible.
- Abre Computed y busca font-family.
- Revisa font-size, font-weight, line-height y letter-spacing.
- En Chrome o Edge, consulta la sección de fuentes renderizadas si está disponible.
Esto importa porque muchas webs usan fuentes variables, pilas largas y reglas responsivas que cambian según dispositivo, idioma o carga.
Cuándo una extensión no funcionará
Una extensión depende de texto real en el DOM. Decide según el formato de la fuente:
| Fuente | Usa | Motivo |
|---|---|---|
| Logo o imagen | Font Detector | El texto son píxeles y requiere comparación visual. |
| Captura | Font Detector o la web original | La extensión solo funciona en la página en vivo. |
| PDF plano | Captura más detección IA | Puede no haber metadatos de fuente. |
| PDF seleccionable | Propiedades del PDF primero | La lista de fuentes incrustadas puede dar el nombre exacto. |
Un flujo fiable para identificar fuentes
En proyectos reales conviene combinar señales:
- Web en vivo: Usa extensión y confirma la fuente calculada y renderizada en DevTools.
- Captura o logo: Recorta la palabra exacta y súbela a Font Detector.
- PDF: Revisa fuentes incrustadas; si está plano, usa captura limpia e IA.
- Resultado dudoso: Compara letras distintivas como a, g, R, S, números, contraste y espaciado.
Preguntas frecuentes
Referencias y fuentes
- Documentación de Google Chrome DevTools para inspeccionar CSS — https://developer.chrome.com/docs/devtools/css
- Chrome Web Store para WhatFont — https://chromewebstore.google.com/
- Sitio oficial de Fonts Ninja — https://www.fonts.ninja/
Última actualización: 22 de mayo de 2026
Volver a Font Detector