Está navegando por sitios web y, de repente, ahí está. La fuente perfecta que ha estado buscando durante semanas. Ese adorno particular en la «a» minúscula y unas proporciones que hacen chillar de alegría al tipógrafo que lleva dentro. ¿Pero el nombre? El autor del sitio no lo etiquetó, revisar el CSS lleva tiempo y el soporte del diseñador está de vacaciones.

Una fuente en pantalla es una propiedad CSS, no una imagen. El navegador entrega honestamente el nombre, peso, tamaño e incluso la fundición a cualquiera que sepa dónde mirar. En los últimos años, las herramientas de identificación de fuentes han evolucionado de una pestaña de DevTools a extensiones que muestran precios de licencia, sugieren alternativas gratuitas y guardan hallazgos en una colección.

En esta guía, cinco métodos: desde el instantáneo (clic derecho) hasta el avanzado (analizar el archivo binario de la fuente). Ninguno requiere un título en diseño ni una suscripción de pago.

💡 Resumen rápido:

• Fontanello: clic derecho y el nombre de la fuente ya está en el menú contextual (Chrome, Firefox, Edge, iOS)
• WhatFont: pase el cursor sobre el texto, vea la familia, tamaño, color y servicio de entrega (Chrome, Safari)
• Fonts Ninja: identifica la fuente, muestra el precio, guarda hallazgos en marcadores (Chrome)
• Inspector integrado: método universal para cualquier navegador, sin extensiones
• What Can My Font Do?: cargue el archivo de la fuente, el servicio decodifica incluso una fuente renombrada

Comparativa de métodos: tabla

1. Fontanello, la fuente en el menú contextual

Fontanello, una extensión que añade el nombre de la fuente directamente al menú contextual del navegador. Seleccione el texto, haga clic derecho, elija Fontanello y verá no solo la familia tipográfica, sino también el peso, tamaño, espaciado entre letras y color. Sin paneles adicionales, sin necesidad de activar la herramienta en la barra.

La extensión funciona en Chrome, Firefox, Edge y en iOS. Este es el método más rápido de todos los existentes: literalmente una acción. No necesita pasar el cursor por ningún lado, no necesita cambiar entre pestañas de DevTools, clic derecho y la respuesta está justo frente a usted.

Ventajas:

• Una acción: clic derecho y resultado en el menú contextual
• Compatible con cuatro plataformas: Chrome, Firefox, Edge, iOS
• Muestra atributos adicionales: tamaño, color, espaciado entre letras

Desventajas:

• No identifica fuentes renombradas
• No guarda el historial de fuentes encontradas

Fontanello, la elección para quienes valoran la velocidad. Un clic, sin activación, sin movimientos extra.

🔗 Fontanello en Chrome Web Store

2. WhatFont, pase el cursor y descubra

WhatFont, una de las extensiones más populares para la identificación de fuentes: tres millones de usuarios y una calificación de 4.0 en Chrome Web Store. El principio es simple: haga clic en el icono de WhatFont en la barra de herramientas, pase el cursor sobre el texto y aparecerá un panel sobre la página con información completa sobre la fuente.

A diferencia de Fontanello, WhatFont le permite resaltar múltiples fragmentos de texto simultáneamente y comparar fuentes visualmente. La extensión muestra la familia tipográfica, peso, tamaño, interlineado y color. Un plus adicional: identifica la fuente de entrega de la tipografía: API de Google Fonts, Adobe Fonts (antes Typekit) o @font-face local.

Ventajas:

• Tres millones de usuarios, extensión estable y probada
• Muestra el servicio de entrega de fuentes: Google Fonts, Adobe Fonts, local
• Funciona en Chrome y Safari

Desventajas:

• Requiere hacer clic en el icono para activarse, una acción extra frente a Fontanello
• Sin versión para Firefox

🔗 WhatFont en Chrome Web Store

3. Fonts Ninja, la navaja suiza del diseñador

Fonts Ninja fue más allá de la simple identificación de fuentes. Además del nombre y las propiedades CSS, la extensión muestra: cuántos estilos están disponibles para la fuente encontrada, el nombre de la fundición productora, el precio de la licencia y, lo que es especialmente valioso, una lista de fuentes similares.

El sistema de marcadores integrado les ahorra horas a los diseñadores. Encontró una fuente interesante en el sitio de otra persona, la guardó en la colección directamente desde la extensión y luego compartió la lista con el equipo. La búsqueda funciona por forma de glifo, tipo de licencia y precio, conveniente cuando necesita una alternativa económica a una fuente costosa.

La extensión la usan 900 mil personas, calificación 4.4. Por ahora funciona solo en Chrome. En tamaño es más pesada que WhatFont, 2 MB frente a 741 KB, pero la funcionalidad lo justifica.

Ventajas:

• Muestra el precio de la fuente, la fundición y alternativas similares
• Marcadores integrados para las fuentes encontradas
• Búsqueda por forma de glifo y tipo de licencia

Desventajas:

• Solo Chrome, sin versiones para Safari y Firefox
• Más pesada que las alternativas: 2 MB frente a 741 KB de WhatFont

🔗 Fonts Ninja en Chrome Web Store

4. Inspector integrado, método universal sin extensiones

Cuando no quiere instalar extensiones o trabaja en un navegador para el cual no existen, todo navegador moderno tiene una herramienta integrada para la identificación de fuentes. Esto es más lento que las extensiones, pero no requiere ninguna instalación.

Google Chrome. Haga clic derecho sobre el texto y elija «Inspeccionar». Se abrirá el panel de DevTools. En la pestaña Estilos busque la propiedad font-family, esta lista todas las fuentes aplicadas al elemento. La primera de la lista es la que se está renderizando en ese momento.

Firefox. Firefox tiene una pestaña «Fuentes» dedicada en el inspector. Clic derecho → «Inspeccionar elemento» → vaya a la pestaña Fuentes. Verá no solo el nombre de la fuente, sino también su peso, tamaño e incluso una vista previa de los glifos, algo que ninguna extensión tiene.

Safari. Primero active el menú «Desarrollo»: Safari → Preferencias → Avanzado → marque «Mostrar menú Desarrollo en la barra de menús». Ahora haga clic derecho sobre el texto → «Inspeccionar elemento». En la barra lateral elija «Estilos, Calculado» y busque la sección font-family.

Ventajas:

• Nada que instalar, integrado en todos los navegadores
• Firefox muestra una vista previa de glifos en la pestaña Fuentes
• Funciona para cualquier elemento, no solo texto

Desventajas:

• Más lento que las extensiones: 10-30 segundos frente a un resultado instantáneo
• Inconveniente para la visualización masiva de fuentes en una página

5. What Can My Font Do?, decodificando fuentes renombradas

Un obstáculo serio para todas las extensiones y el inspector es una fuente renombrada. Cuando un desarrollador ensambla un paquete personalizado, el nombre de font-family pierde la conexión con el original: en lugar de Inter o Roboto ve algo como custom-font-3742. Las extensiones son impotentes, leen la propiedad CSS, no el archivo en sí.

La solución es el servicio What Can My Font Do?. El algoritmo:

• A través del inspector de Chrome vaya a la pestaña Aplicación → Marcos → Fuentes. Encuentre el archivo de la fuente haciendo coincidir el nombre del archivo con lo que ve en font-family.
• Abra el archivo de la fuente en una nueva pestaña, se descargará.
• Arrastre el archivo descargado a la ventana de What Can My Font Do?. El servicio analizará los datos binarios y mostrará: el nombre real de la fuente, la fundición, el número de glifos, el soporte de idiomas, la licencia y todos los caracteres en forma de tabla.

Este no es un método instantáneo, requiere uno o dos minutos y una comprensión básica de DevTools. Pero cuando las extensiones fallan frente a una fuente renombrada o ensamblada a medida, What Can My Font Do? es el único método que funciona.

Ventajas:

• Identifica fuentes renombradas mediante el análisis del archivo binario
• Muestra información completa: glifos, idiomas, licencia
• Servicio web gratuito, no requiere instalación

Desventajas:

• Lento: de uno a dos minutos por fuente
• Requiere comprensión de la pestaña Aplicación en DevTools

Video: cómo identificar una fuente en un minuto

Vea un tutorial paso a paso de los cinco métodos en acción, desde las extensiones hasta el inspector:

⁉️🤔 Preguntas frecuentes

¿Son seguras las extensiones de fuentes? ¿No recopilan datos?

WhatFont, Fontanello y Fonts Ninja no recopilan datos personales ni transmiten información sobre los sitios visitados. En la ficha de Chrome Web Store de WhatFont, el desarrollador declara explícitamente: la extensión no recopila ni utiliza datos del usuario. Fonts Ninja solicita más permisos, pero esto es necesario para que funcione la función de marcadores de fuentes.

¿Se puede averiguar una fuente comercial y el precio de su licencia?

Fonts Ninja es la única extensión de la lista que muestra el precio de la licencia directamente al pasar el cursor sobre el texto. Para proyectos comerciales esto ahorra horas: no necesita buscar la fuente por separado en MyFonts o Adobe Fonts para conocer el costo.

¿Qué hacer si la fuente se identifica pero no se puede descargar?

Las fuentes en los sitios web casi siempre están protegidas por derechos de autor. Averiguar el nombre es legal. Descargarlas y usarlas sin licencia no lo es. Si la fuente es comercial (por ejemplo, del catálogo de Linotype o Monotype), compre una licencia en el sitio web de la fundición. Las fuentes gratuitas suelen estar alojadas en Google Fonts y se pueden usar libremente en cualquier proyecto.

¿Por qué Firefox muestra la fuente pero Chrome no?

Esto sucede cuando una fuente se conecta mediante @font-face con diferentes formatos: WOFF2 para Chrome, WOFF para versiones anteriores de Firefox. Si la fuente no se muestra en Chrome, revise la consola de DevTools en la pestaña Consola: quizás el archivo de la fuente esté bloqueado por la política CORS o no se cargó debido a un bloqueador de anuncios.

¿Qué método debería elegir un desarrollador frontend y cuál un diseñador?

Para un desarrollador frontend es más conveniente el inspector integrado, ya está abierto en su flujo de trabajo, no necesita cambiar. Para un diseñador, Fonts Ninja: muestra el precio, alternativas y permite guardar hallazgos en marcadores para proyectos futuros. Para comprobaciones puntuales de «¿qué fuente es esta?» use Fontanello, un clic y la respuesta está justo frente a usted.

¿Qué herramienta de identificación de fuentes elegir?

La mejor elección depende de la tarea. Si es un desarrollador frontend y el inspector ya está abierto, quédese en él, la pestaña Fuentes en Firefox le dará más información que cualquier extensión. Si es un diseñador que busca referencias, instale Fonts Ninja por los marcadores, precios y fuentes similares. Para comprobaciones rápidas, Fontanello es el rey de la velocidad: clic derecho y listo.

Y cuando ninguna extensión pueda con ello, fuente renombrada, compilación personalizada, paquete casero, cargue el archivo en el servicio de análisis de fuentes What Can My Font Do?. Este es el último recurso que siempre funciona.