Detector gratuito de fuentes web

El Web Font Detector es una herramienta online gratuita que extrae todas las fuentes usadas en HTML o CSS e identifica las Google Fonts, las fuentes del sistema y las fuentes web. Funciona por completo en tu navegador, sin necesidad de instalar nada ni registrarse.

Pega tu código CSS o HTML y la herramienta extrae todas las declaraciones font-family y las reglas @font-face.

Sí: reconoce las URL del CDN de Google Fonts y las asigna a los nombres de las fuentes.

Sí, totalmente gratis.

Por supuesto. El Web Font Detector procesa todo del lado del cliente, en tu navegador. No se sube ni se almacena ningún dato en ningún servidor. Tu contenido permanece siempre privado en tu dispositivo.

Sí, el Web Font Detector es totalmente adaptable y funciona en smartphones y tablets. Puedes usarlo en cualquier dispositivo con un navegador web moderno, sin necesidad de descargar ninguna app.

No se necesita ninguna cuenta ni registro. Solo abre el Web Font Detector en tu navegador y empieza a usarlo de inmediato. No hay barreras de registro ni restricciones de uso.

El Web Font Detector funciona en todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera. Para una mejor experiencia, usa la última versión de tu navegador preferido.

Una fuente del sistema ya viene incluida en el sistema operativo del visitante — Arial, Helvetica, Georgia, Segoe UI, y las palabras clave genéricas serif, sans-serif y monospace — por lo que se carga al instante sin necesidad de descargar nada. Una fuente web es un archivo que el propio sitio sirve, declarado en una regla @font-face y alojado junto con la página; el navegador debe obtener ese archivo antes de que se renderice el texto. Una Google Font es una fuente web entregada desde el CDN de Google en fonts.googleapis.com, de código abierto y de uso gratuito bajo su licencia. El detector etiqueta cada tipografía que encuentra como Google, Sistema, Personalizada o Desconocida, para que puedas identificar de un vistazo cuáles requieren una descarga y cuáles vienen gratis con el dispositivo. Pega tu CSS o HTML y el panel de resumen cuenta cada categoría por ti.

Abre la página y obtén su código fuente — usa la opción Ver código fuente o las herramientas de desarrollador de tu navegador para copiar el markup, o copia la hoja de estilos directamente desde un editor de código — y luego pégala en el detector. El analizador examina cada declaración font-family, la forma abreviada font como "font: bold 16px/1.5 Georgia, serif", los bloques @font-face y las URLs de @import y <link> de Google Fonts, y luego resuelve los nombres en una sola lista sin duplicados. Cada entrada muestra el selector o el contexto en el que aparece, para que puedas ver si una tipografía se usa en el body, en un h1 o en un estilo en línea. Leer los nombres exactos de familia es mejor que adivinar una tipografía a simple vista, pero recuerda que las fuentes web son activos con licencia — comprueba la licencia antes de reutilizar una. Pega el código fuente de un sitio arriba para ver su lista completa de fuentes en segundos.

Una fuente se etiqueta como Desconocida cuando su nombre no está en la lista integrada de aproximadamente cincuenta fuentes de sistema comunes y tampoco se vinculó a una URL del CDN de Google Fonts ni a una regla @font-face en el código que pegaste. En la práctica, eso suele significar una fuente web con licencia cargada de otra manera, una tipografía autoalojada cuyo bloque @font-face no se incluyó en el fragmento, o simplemente un error tipográfico en el nombre de familia. No es un error — la herramienta te está indicando que encontró una tipografía real con nombre, pero no pudo confirmar de dónde proviene. Si una fuente que esperabas que fuera Personalizada aparece como Desconocida, pega más contenido de la hoja de estilos para que se incluya el bloque @font-face correspondiente. Pega tu CSS completo para que cada fuente se clasifique con la mayor precisión posible.

Una pila de fuentes (font stack) es el valor completo de font-family — una tipografía principal seguida de alternativos que el navegador prueba en orden, como "Inter, -apple-system, Arial, sans-serif". Una pila de fuentes no del sistema es esa misma lista sin los alternativos genéricos del sistema, dejando solo las tipografías que la página realmente carga como fuentes web. El detector construye esta pila por ti y la ofrece para copiar con un solo clic, algo muy útil cuando quieres reutilizar las tipografías reales de un diseño sin arrastrar toda su cadena de alternativos, o cuando estás auditando exactamente de qué fuentes depende una página. Recortar una pila a solo las fuentes que realmente necesitas también es una mejora de rendimiento, ya que cada fuente web es un archivo que el navegador debe descargar. Pega tu código fuente y copia la pila no del sistema ya lista desde los resultados.

Detecta ambas, y más. El analizador maneja cuatro tipos de referencias a fuentes y las combina en una sola lista: bloques @font-face para fuentes autoalojadas o personalizadas, capturadas con su nombre de familia declarado y la URL de src para que puedas ver desde dónde se carga el archivo; reglas @import url(...) de Google Fonts y etiquetas <link> que apuntan a fonts.googleapis.com, con los nombres extraídos del parámetro family de la URL; declaraciones font-family estándar en cualquier regla CSS o estilo en línea; y la forma abreviada font, donde el tamaño y la familia están escritos juntos. Las Google Fonts obtienen un enlace directo a su página de muestra tipográfica, y las fuentes @font-face se listan con su URL de origen. Como todo se ejecuta localmente en tu navegador, funciona sobre el código que pegas y no sobre una URL en vivo. Pega una hoja de estilos para ver todas las fuentes, sin importar cómo se carguen.