Le ha pasado: está navegando por un sitio y, de repente, se detiene. La tipografía del encabezado es tan buena que ya se imagina cómo se vería en su proyecto. Pero, ¿cómo se llama? El dueño del sitio no respondió, el código fuente tiene el CSS ofuscado y buscar en Google «fuente serif bonita con una G rara» puede llevarle hasta la mañana.

Los diseñadores caen en esta trampa constantemente. Revisar gigabytes de colecciones esperando una coincidencia es una lotería. ¿Y si la fuente ni siquiera está ahí?

Afortunadamente, 2026 nos ofrece un conjunto de herramientas que resuelven el problema en segundos. Algunas funcionan con imágenes cargadas, otras directamente sobre páginas activas. Cubrimos 9 maneras de identificar una fuente: desde servicios clásicos hasta marcadores que no pesan ni un megabyte.

💡 Resumen rápido:

• Suba una captura de pantalla con texto a WhatTheFont o WhatFontIs y obtenga el nombre de la fuente (a menudo con una alternativa gratuita).
• Instale la extensión Fonts Ninja o WhatFont, pase el cursor sobre el texto de un sitio y vea el nombre, tamaño, interlineado y color.
• Si ni siquiera tiene una captura, abra Identifont, responda de 5 a 10 preguntas sobre la forma de las letras y obtenga una coincidencia.
• Una vez encontrada la fuente, súbala al sitio mediante CSS @font-face (o un plugin para WordPress) y úsela.

Servicios en línea: identificar fuentes a partir de imágenes cargadas

Estas cuatro herramientas funcionan bajo un principio unificado: usted les da una imagen con texto, ellas la procesan contra una base de datos de cientos de miles de fuentes y devuelven coincidencias.

1. WhatTheFont, el estándar de referencia de MyFonts

WhatTheFont de MyFonts es el identificador de fuentes más preciso en 2026. Por dentro, aprendizaje profundo basado en una base de datos de más de 233 000 estilos tipográficos. Suba una imagen, haga clic en el texto y obtenga una lista de coincidencias. La base de datos se inclina hacia las fuentes comerciales, pero casi siempre ofrece también alternativas gratuitas.

Ventajas: excelente precisión en tipografías estándar, aplicación móvil para iOS y Android, no requiere registro. Desventajas: débil con fuentes manuscritas y muy estilizadas, el recortador integrado a veces corta ascendentes y descendentes.

🔗 WhatTheFont en MyFonts

2. WhatFontIs, la base de datos más grande (más de 900 000 fuentes)

WhatFontIs mantiene la base de datos más grande, con más de 900 000 fuentes. Úsela en segundo lugar si WhatTheFont no dio un resultado fiable.

Característica principal: selección automática de alternativas gratuitas de Google Fonts para las coincidencias de pago. Para el presupuesto de un proyecto web, esto supone una hora de tiempo ahorrada.

Ventajas: el índice más amplio, sugerencias de alternativas gratuitas, extensión para el navegador. Desventajas: la versión gratuita está plagada de anuncios, necesita marcar manualmente los símbolos antes de buscar.

🔗 WhatFontIs

3. Fontspring Matcherator, precisión en OpenType

Fontspring Matcherator es uno de los favoritos de diseñadores que trabajan con fundiciones independientes. A diferencia de WhatTheFont (catálogo de MyFonts), Matcherator cubre fuentes indie, detecta funciones OpenType (ligaduras, glifos alternativos) y admite arrastrar y soltar.

Ventajas: gratuito, muy bueno con fuentes web, comparación lado a lado de coincidencias. Desventajas: base de datos más pequeña que la de MyFonts, sensible a la calidad de la imagen.

🔗 Fontspring Matcherator

4. Font Squirrel, fuentes gratuitas y cero anuncios

Font Squirrel construyó su reputación seleccionando fuentes gratuitas para uso comercial. Su Matcherator es el más minimalista: suba la imagen, recórtela y obtenga resultados. Sin anuncios, sin ventanas emergentes. Su función distintiva es la rotación de imagen: si la fuente está inclinada, Font Squirrel lo resuelve donde otros fallan.

Ventajas: la interfaz más limpia, fuentes gratuitas, resultados rápidos. Desventajas: la base de datos es pequeña, casi nunca encuentra fuentes comerciales.

🔗 Font Squirrel Matcherator

Extensiones de navegador: identificar fuentes directamente en sitios web

Los servicios en línea son buenos para imágenes. Pero si la fuente está justo frente a usted ahora, en una página web activa, las extensiones de navegador le dan una respuesta en segundos. Sin capturas de pantalla, sin pestañas nuevas.

5. Fonts Ninja, pruebe, compre, descargue

Fonts Ninja (antes FontFaceNinja) es el líder indiscutido entre los identificadores de fuentes para navegador. La extensión está disponible para Chrome, Firefox, Safari y Edge.

Pase el cursor sobre un texto y verá el nombre de la fuente, tamaño, interlineado, color y espaciado entre letras. Pero lo más importante es que Fonts Ninja le permite probar la fuente: escriba su propio texto y véalo en tiempo real con esa misma tipografía. Y si le gusta, descarga de inmediato la versión gratuita o procede a comprar la comercial.

Extra: un botón de máscara que oculta todos los anuncios e imágenes de la página, dejando solo la tipografía en estado puro. Para un diseñador que evalúa una maquetación, esto es invaluable.

Ventajas: conjunto completo (identificar, probar, descargar); funciona en 4 navegadores. Desventajas: para filtros avanzados (forma de letra, tipo de licencia) necesita registrarse.

🔗 Fonts Ninja en Chrome Web Store

6. WhatFont, pase el cursor y aprenda todo

WhatFont es una extensión recomendada por Wired y apreciada por desarrolladores web por su sencillez. Disponible para Chrome y Firefox.

Pase el cursor y aparece el nombre de la fuente. Haga clic y obtiene un mapa completo de propiedades CSS: familia, peso, tamaño, interlineado, color en HEX. Esto no es solo un identificador, es un inspector tipográfico. Si la fuente pertenece al catálogo de Google Fonts, WhatFont proporciona un enlace de descarga directa.

Ventajas: resultado instantáneo, análisis CSS profundo, enlaces a Google Fonts. Desventajas: no identifica fuentes en imágenes (solo texto vivo en la página), no permite probar la fuente con su propio texto.

🔗 WhatFont en Chrome Web Store

7. Typ.io, combinaciones de fuentes e inspiración

Typ.io resuelve la tarea un paso más allá: no basta con identificar la fuente, usted quiere entender con qué combinarla. Tras instalar la extensión, aparece un botón «T» en la esquina del navegador. Haga clic en él y verá todas las fuentes de la página como una lista independiente. Haga clic en un nombre y accederá a la ficha de la fuente con ejemplos de combinaciones: «esta fuente se usa junto con...».

El propio sitio Typ.io es una base de datos de decisiones de diseño reales: la comunidad sube capturas de pantalla de sitios con desgloses de combinaciones tipográficas. Para quienes no solo quieren encontrar una fuente, sino entender el contexto de su uso.

Ventajas: selección de combinaciones tipográficas, base de datos de ejemplos reales. Desventajas: la extensión solo muestra nombres de fuentes (sin detalles CSS), la funcionalidad completa requiere registro.

🔗 Typ.io

8. Fount, un bookmarklet que no pesa nada

Fount no es una extensión, es un bookmarklet. Usted añade un botón a los marcadores de su navegador, va a cualquier sitio, hace clic en ese marcador y el cursor se convierte en una cruz. Haga clic sobre un texto y aparece una ventana con el nombre de la fuente, tamaño, peso y estilo. Vuelva a hacer clic en el marcador para desactivar el modo.

La opción ideal para quienes no quieren saturar su navegador con extensiones. Funciona en Safari, Chrome, Firefox e IE8+. No requiere actualizaciones, no recopila datos, no usa procesos en segundo plano. Simplemente funciona.

Ventajas: ultraligero, multiplataforma, no hay nada que instalar. Desventajas: solo identifica lo que realmente se renderizó en la pila de fuentes (no lo que está previsto en CSS), sin detalles como el color.

🔗 Fount, añadir bookmarklet

Método especial: cuando no hay imagen ni sitio

9. Identifont, identificar fuentes por descripción

Identifont es la herramienta más antigua de esta colección (desde el año 2000), pero sigue siendo indispensable. No acepta imágenes ni analiza sitios. En su lugar, hace preguntas: ¿la letra «Q» tiene serifas? ¿Los bucles de la «g» minúscula están conectados? ¿Qué aspecto tiene el signo «&»?

Usted responde de 5 a 10 preguntas, Identifont reduce el círculo y ofrece una coincidencia. Suena arcaico, pero es el único método que funciona cuando no tiene ni una captura de pantalla ni una URL, solo el recuerdo de cómo era la fuente.

Ventajas: funciona sin ninguna imagen, entrena el ojo tipográfico. Desventajas: lento (más de 5 minutos por búsqueda), el diseño del sitio no se ha actualizado en décadas, la base de datos es inferior a la de los servicios modernos.

🔗 Identifont

Tabla comparativa: qué elegir

No existe una única herramienta perfecta. Esquema profesional: suba la imagen a WhatTheFont, haga una segunda pasada con Fontspring Matcherator y observe la intersección. El nombre que se repita es la verdad.

Cómo subir la fuente encontrada a un sitio

Identificó la fuente, descargó el archivo, ahora necesita añadirla al sitio. El método más universal es @font-face.

Paso 1. Descargue la fuente en formato .ttf o .otf.

Paso 2. Conviértala a formatos web mediante el Generador Webfont de Font Squirrel. El resultado le proporciona .woff, .woff2 y .ttf, más un archivo CSS listo para usar. WOFF2 es el formato principal para la web en 2026, compatible con el 98% de los navegadores.

Paso 3. Suba los archivos de la fuente al servidor mediante FTP o el gestor de archivos del hosting, a la carpeta /wp-content/themes/your-theme/fonts/.

Paso 4. Escriba @font-face en el CSS:

1
@font-face {
2
  font-family: 'MyCustomFont';
3
  src: url('fonts/MyCustomFont.woff2') format('woff2'),
4
       url('fonts/MyCustomFont.woff') format('woff');
5
  font-weight: 400;
6
  font-style: normal;
7
  font-display: swap;
8
}

La directiva font-display: swap es crítica: el navegador muestra primero la fuente del sistema y, cuando la personalizada se carga, la intercambia. Sin ella, el texto permanecerá invisible hasta que la fuente se descargue.

Paso 5. Aplique la fuente a los elementos:

1
h1, h2, h3 {
2
  font-family: 'MyCustomFont', sans-serif;
3
}

WordPress: el plugin Custom Fonts proporciona una interfaz visual para subir cualquier fuente. O bien escriba @font-face en el functions.php del tema hijo mediante el hook wp_head.

Antes de editar cualquier archivo del tema, haga una copia de seguridad. Un error en @font-face o functions.php puede tumbar el sitio.

Vea un breve vídeo que muestra todo el proceso, desde la captura de pantalla hasta el nombre de la fuente final, usando WhatTheFont:

⁉️🤔 Preguntas frecuentes

¿Por qué WhatTheFont no encuentra mi fuente?

Tres razones principales: calidad de imagen deficiente, texto girado en ángulo o la fuente es manuscrita. Tome una captura de pantalla más grande, sobre un fondo contrastado y en horizontal. Si no funcionó, pruebe Fontspring Matcherator y WhatFontIs. Para fuentes manuscritas, a menudo no existe una coincidencia exacta en principio: son únicas.

¿Se puede identificar una fuente a partir de un archivo PDF?

Sí, si el texto no está rasterizado. Abra el PDF, seleccione el texto y haga una captura de pantalla. Súbala a cualquiera de los primeros cuatro servicios. Para escaneos, el resultado depende de la resolución: 150 DPI o más ofrecen una precisión aceptable.

Se identificó la fuente, pero es de pago. ¿Dónde conseguir una alternativa gratuita?

WhatFontIs ofrece automáticamente alternativas gratuitas de Google Fonts bajo cada coincidencia de pago. Manualmente: vaya a fonts.google.com, introduzca el nombre de la fuente encontrada y observe las visualmente similares. Reemplazos gratuitos: con serifa, Playfair Display, Lora, Merriweather; sin serifa, Inter, Roboto, Manrope.

¿Qué formato de fuente usar para la web en 2026?

WOFF2 es el principal, WOFF es el respaldo para navegadores antiguos. TTF y OTF no deberían usarse en la web: pesan de 2 a 3 veces más sin compresión. El generador de Font Squirrel (mencionado arriba) convierte todo a WOFF2+WOFF con un clic.

Qué usar en 2026: desglose final

Nueve herramientas no significa que deba usarlas todas. Aquí tiene una matriz de selección simple:

• Tiene una captura de pantalla → WhatTheFont, luego Fontspring Matcherator para verificar.
• Necesita una alternativa gratuita → WhatFontIs (selección automática desde Google Fonts).
• Fuente en un sitio activo → Fonts Ninja o WhatFont (extensión en 5 segundos).
• No hay nada disponible, solo memoria → Identifont.
• No quiere instalar extensiones → Fount (bookmarklet en marcadores).

Y si ninguna herramienta funcionó, abra DevTools (F12 → Inspeccionar → Computado → font-family). Incómodo, pero fiable. Y nadie canceló el subreddit r/identifythisfont: diseñadores en activo nombran la fuente en un par de minutos.

Una buena fuente cambia la percepción de un sitio más rápido que rediseñar tres bloques. Ahora tiene todo lo necesario para encontrar esa y ponerla en su proyecto.