Una fuente no es solo «letras bonitas». Controla la atención, define el ambiente y afecta directamente la legibilidad. Una mala fuente aleja a los visitantes de un sitio en cuestión de segundos, incluso si el contenido es excelente.

A veces visita un sitio web y nota que el texto se ve costoso y estiloso. Quiere averiguar qué fuente se está usando, para su propio proyecto o simplemente por curiosidad profesional. Pero los dueños de los sitios no etiquetan su tipografía, y algunos renombran intencionalmente las fuentes en el CSS para dificultar su identificación.

Buenas noticias: identificar una fuente de cualquier sitio web es posible. No necesita ser desarrollador front-end ni diseñador; tres enfoques cubren prácticamente todos los escenarios. Desde el inspector integrado del navegador hasta extensiones de un clic y servicios para fuentes en imágenes.

💡 Resumen rápido:

• Abra las DevTools (F12) y busque font-family en la pestaña Computed (Calculado)

• Instale Whatfont o Fontanello y pase el cursor sobre el texto

• Suba una captura de pantalla a Font Squirrel Matcherator o WhatTheFont

1. Inspector integrado del navegador

El método más accesible, que no requiere ninguna instalación. Todo navegador moderno (Chrome, Firefox, Edge, Safari) contiene herramientas de desarrollo (DevTools). Entre ellas hay un inspector que muestra las propiedades CSS de cualquier elemento de la página, incluida la fuente.

Cómo abrirlo. En Windows, presione Ctrl + Shift + I; en Mac, Cmd + Shift + I. O haga clic derecho sobre el texto y seleccione «Inspect» / «View code» (Inspeccionar / Ver código). Se abrirá el panel de DevTools.

En el lado izquierdo del panel verá la estructura HTML; en el derecho, las reglas CSS. Pero la ruta más rápida hacia la fuente es a través de la pestaña Computed (Calculado). Desplácese por la lista de propiedades hasta font-family; este es el nombre de la tipografía. Junto a él, el navegador muestra el archivo de fuente específico que se está renderizando en la página.

También existe una ruta alternativa para quienes quieran ver todas las fuentes del sitio de una vez. En las Chrome DevTools, abra la pestaña Application (Aplicación) → sección Frames (Marcos) → carpeta Fonts (Fuentes). El navegador mostrará una lista de cada archivo de fuente cargado con su URL y formato (woff2, ttf). Es más lento, pero revela lo que está oculto en @font-face.

Ventajas: gratuito, no requiere extensiones, muestra el nombre exacto de la fuente y su estilo (peso, estilo, tamaño). Desventajas: requiere varios clics; el método no funciona en dispositivos móviles.

2. Extensiones del navegador

Si consulta fuentes con frecuencia, una extensión le ahorrará horas. El principio es simple: pasa el cursor sobre el texto y la extensión muestra el nombre de la fuente y sus parámetros CSS en una información sobre herramientas.

2.1 Whatfont

La solución más popular en este nicho. Recomendada por Wired, Lifehacker y SwissMiss. La instalación desde la Chrome Web Store toma un clic.

Después de la instalación, haga clic en el icono de la extensión en la esquina superior derecha del navegador para activar el modo de detección. Ahora, cuando pase el cursor sobre cualquier texto, Whatfont muestra la tipografía directamente encima del cursor. Al hacer clic en el texto se revela la ficha completa: familia, peso, tamaño, interlineado y color.

La extensión también funciona en Firefox y Safari (mediante una adaptación). Gratuita, no requiere registro, código abierto en GitHub.

🔗 Whatfont en Chrome Web Store

2.2 Fontanello

Mientras Whatfont muestra la información al pasar el cursor, Fontanello funciona mediante clic derecho. Seleccione un texto en un sitio, presione el botón derecho del ratón y elija Fontanello en el menú contextual. Aparece un panel con información completa: nombre de la fuente, peso, tamaño, color e incluso la relación de contraste del texto respecto al fondo (un criterio de accesibilidad).

Fontanello está disponible para Chrome y Firefox. Una ventaja adicional: la extensión no sobrecarga la página con un rastreo constante; solo se activa cuando usted la solicita.

🔗 Fontanello en Chrome Web Store

2.3 Fonts Ninja

Una herramienta más potente con una función de «ADN tipográfico»: un algoritmo propietario que analiza los archivos de las fuentes para obtener resultados más precisos. Más allá de identificar fuentes al pasar el cursor, Fonts Ninja permite marcar las fuentes encontradas y mostrar un resumen de todas las tipografías utilizadas en una página.

Hay una salvedad: los marcadores y algunas funciones requieren registro. Pero la identificación básica de fuentes funciona sin cuenta. La extensión es de pago (con periodo de prueba), así que vale la pena considerarla si usted trabaja con tipografía de forma profesional.

🔗 Fonts Ninja en Chrome Web Store

3. Cómo identificar una fuente a partir de una imagen

El inspector y las extensiones son inútiles cuando la fuente forma parte de una imagen: un logotipo, un banner o un meme. El texto en una imagen no es un elemento HTML, lo que significa que no tiene propiedades CSS. Existen servicios especializados para estos casos.

3.1 Font Squirrel Matcherator

Una herramienta gratuita de Font Squirrel, probada durante años. Cómo funciona:

• Suba una captura de pantalla o un fragmento de texto a la interfaz de Matcherator
• Seleccione el área que contiene las letras (marcador azul en la barra de herramientas)
• Haga clic en «Matcherate It!»

El servicio analiza las formas de los caracteres y devuelve una lista de las coincidencias más cercanas de su base de datos. Si no hay una coincidencia exacta, sugiere alternativas visualmente similares con un porcentaje de similitud. Incluso funciona con fuentes manuscritas, siempre que las letras no estén unidas entre sí.

🔗 Font Squirrel Matcherator

3.2 WhatTheFont de MyFonts

WhatTheFont utiliza aprendizaje profundo y una base de datos de más de 233.000 fuentes. Suba una imagen, haga clic en la letra deseada y el algoritmo encuentra coincidencias. Su principal ventaja frente a Matcherator: WhatTheFont maneja escrituras conectadas donde las letras fluyen unas dentro de otras. Esta es una capacidad técnica seria de la que carecen los servicios más antiguos.

Para obtener los mejores resultados, suba texto horizontal con buena resolución sobre un fondo contrastante.

🔗 WhatTheFont en MyFonts

Video: cómo identificar una fuente en un minuto

Una breve demostración de cómo instalar la extensión Identify Font y encontrar una fuente en cualquier sitio web sin abrir las DevTools:

⁉️🤔 Preguntas frecuentes

¿Puedo identificar una tipografía en un sitio móvil?

Sí, pero con limitaciones. Las extensiones no están disponibles en navegadores móviles, y las DevTools tampoco. El enfoque que funciona: tome una captura de pantalla del texto en su teléfono y súbala a WhatTheFont o Font Squirrel Matcherator desde una computadora. Si el texto en el sitio es grande y claro, el servicio reconocerá la tipografía desde la captura con la misma eficacia que desde una imagen de escritorio.

¿Qué pasa si el dueño del sitio renombró la fuente en el CSS?

Algunos desarrolladores cambian font-family en los estilos a un nombre arbitrario, aunque en realidad estén cargando un archivo de fuente específico. En este caso, el método de DevTools a través de la pestaña Application (Frames → Fonts) mostrará las URL reales de los archivos de fuente. Del nombre del archivo (por ejemplo, Inter-Regular.woff2) puede identificar fácilmente la tipografía. Extensiones como Fonts Ninja con "análisis de ADN" también evitan el renombramiento al analizar el archivo en sí en lugar de la propiedad CSS.

¿Cuál es el método más preciso?

Para texto en una página: la extensión Whatfont o Fontanello; una pasada del cursor y obtiene el nombre exacto. Para imágenes: WhatTheFont con su motor de red neuronal es más preciso que Matcherator para fuentes conectadas y decorativas. Para certeza total con CSS renombrado: DevTools → Application → Fonts, donde ve la URL real del archivo de fuente; el error es imposible aquí.

¿Hay que pagar para identificar tipografías?

No. Todos los métodos mencionados en este artículo son gratuitos. DevTools viene integrado en el navegador. Whatfont y Fontanello son extensiones gratuitas con código abierto. Font Squirrel Matcherator es un servicio web gratuito. WhatTheFont es gratuito (se monetiza mediante la venta de fuentes, no la identificación). Fonts Ninja tiene una versión de pago, pero la identificación básica de fuentes funciona sin pagar.

¿Se puede aplicar automáticamente una tipografía descubierta a su propio sitio?

Técnicamente sí, pero legalmente depende de la licencia de la fuente. Puede identificar la tipografía libremente. Sin embargo, solo puede usarla en su propio sitio si la fuente tiene una licencia abierta (SIL Open Font License, Apache 2.0) o si ha adquirido una licencia comercial. Google Fonts, Font Squirrel y Adobe Fonts son fuentes seguras con términos de uso claros.

Qué método de identificación de tipografías elegir

Si se enfrenta a esta cuestión por primera vez, comience con DevTools. Es gratuito, toma 30 segundos y no requiere instalación. Para trabajo habitual con tipografía, instale Whatfont: una pasada del cursor en lugar de cuatro clics.

Cuando una fuente está oculta en una imagen, suba una captura de pantalla a WhatTheFont. Es el servicio gratuito de búsqueda basada en imágenes más avanzado tecnológicamente. Y si la tipografía está renombrada en el CSS, acceda al archivo a través de Application → Fonts en DevTools: esta ruta revela la verdad sin importar los trucos del desarrollador.

Recuerde: encontrar una fuente no es difícil. Lo más complejo es aplicarla correctamente. Verifique la licencia, pruebe la legibilidad en contenido real y no mezcle más de dos tipografías en un mismo proyecto. La buena tipografía no grita; funciona.