Cómo saber qué fuente usa una web: 4 métodos prácticos

Elige la forma correcta de encontrar una fuente web

La búsqueda de una fuente usada en una página web puede referirse a dos situaciones. Tal vez miras texto seleccionable en una página activa, o quizá tienes una captura en la que las letras ya forman parte de una imagen. Empieza con este mapa:

Primero comprueba si el texto de la web está activo

Intenta seleccionar una palabra con el ratón o el teclado. Si puedes resaltarla, copiarla o buscarla, probablemente sea texto HTML activo. El navegador tiene acceso al elemento, a sus estilos calculados y a la pila de fuentes elegida por la página.

Si no puedes seleccionar las palabras porque están dentro de una imagen principal, un logotipo, un canvas o un anuncio plano, trátalas como una imagen. Un método de texto activo puede devolver la fuente del contenedor y pasar por alto la tipografía que aparece dentro del recurso visual.

Ten en cuenta los cambios responsive. Un titular de escritorio puede usar otra familia o peso en móvil. Comprueba el elemento y el tamaño de pantalla que correspondan al diseño que quieres reproducir.

Usa una extensión para el texto de una página activa

Una extensión para encontrar fuentes suele ser la opción más rápida cuando investigas una web activa y no necesitas una auditoría CSS completa. Puede identificar el elemento bajo el cursor y mostrar familia, tamaño, peso y color.

1. Abre la página que contiene la tipografía y espera a que termine de cargar.
2. Activa una extensión fiable de inspección de fuentes y pasa el cursor sobre el titular, menú, botón o párrafo exacto.
3. Anota la familia y el peso, no solo la categoría general como serif o sans serif.
4. Repite la comprobación en otro elemento. Si aparecen familias distintas, el diseño puede usar una combinación intencionada para títulos y texto.

Para comparar extensiones y sus límites, consulta la Guía de extensiones para encontrar fuentes. También explica cuándo conviene más analizar una captura.

Verifica la fuente con DevTools

DevTools es mejor cuando necesitas pruebas para un rediseño, una auditoría CSS, una revisión de accesibilidad o una tarea de implementación. Permite inspeccionar el elemento seleccionado en lugar de confiar solo en una etiqueta visual.

1. Haz clic derecho sobre el texto y elige Inspeccionar, o abre DevTools y usa el selector de elementos.
2. En Styles o Computed, busca font-family y anota el orden completo de las alternativas.
3. Comprueba font-size, font-weight, line-height, letter-spacing y text-transform porque cambian la apariencia.
4. Si el navegador muestra las fuentes renderizadas, compáralas con la pila declarada y anota si se usó una alternativa.

Para el flujo técnico del navegador, consulta la documentación oficial de Documentación de inspección CSS de Chrome DevTools.

Encuentra una fuente desde una captura de una web

Un buscador de fuentes desde captura es la mejor opción cuando no puedes inspeccionar la página original, el texto está dentro de un gráfico o el diseño se compartió como imagen plana. También sirve si la web cambia antes de que puedas volver a ella.

Recorta la muestra alrededor de un solo estilo. Una línea nítida de titular o botón ofrece formas de letras más útiles que una página completa con varias familias, iconos, fotos y etiquetas pequeñas.

• Usa texto nítido: Elige un recorte claro con suficientes letras repetidas para comparar formas como a, e, g, R y t.
• Mantén un estilo: No mezcles un titular en negrita con un párrafo fino si quieres identificar una sola familia.
• Espera una coincidencia probable: Las fuentes personalizadas o modificadas pueden devolver una alternativa cercana y no el original exacto.

Si ya tienes una captura, prueba el Abrir Website Font Detector para comparar las formas visibles y revisar sugerencias similares.

Errores habituales al identificar fuentes web

El nombre de una fuente no basta para reproducir un diseño. Estas situaciones explican por qué dos herramientas pueden discrepar:

• Fuentes alternativas: La primera opción declarada puede no ser la que el navegador renderizó.
• Pesos variables: Una fuente variable puede verse distinta con diferentes pesos o tamaños ópticos.
• Texto en imágenes: DevTools no puede inspeccionar letras rasterizadas dentro de un banner, logotipo o canvas.
• Componentes mezclados: Un sistema de diseño puede usar una fuente para títulos, otra para la interfaz y otra en la publicidad.
• Licencias: Identificar una fuente no da permiso para descargarla o usarla comercialmente. Comprueba siempre sus condiciones.

Cuando la precisión importa, guarda una pequeña evidencia: URL o captura, elemento inspeccionado, familia declarada, familia renderizada si está disponible y coincidencia visual más cercana.

Convierte el resultado en una decisión útil

Usa DevTools o una extensión cuando necesites la pila técnica de una fuente en HTML activo. Usa una captura cuando estudies un banner, logotipo, vista móvil o diseño guardado. La respuesta más fiable suele venir de adaptar el método a la evidencia que tienes.

Después de encontrar una familia probable, compara las mismas letras con el mismo peso y tamaño, y confirma la licencia antes de usarla en un proyecto de cliente, producto o web pública.