Extractor de fuentes web.

¿Qué es un extractor de fuentes?

Un extractor de fuentes es una herramienta online que encuentra las tipografías que usa una página web y te da acceso directo a los archivos de fuente que hay detrás. En lugar de adivinar una fuente a ojo, pegas un enlace y obtienes una lista precisa de las familias, grosores, estilos y formatos que carga el sitio. FontExtractor es un extractor de fuentes web gratuito que hace exactamente eso en pocos segundos, con vistas previas en vivo y descargas en un clic.

Las webs modernas casi nunca se limitan a las pocas fuentes instaladas en todos los ordenadores. Cargan fuentes web personalizadas mediante reglas CSS @font-face, ya sea desde Google Fonts, Adobe Fonts, una CDN o el propio servidor del sitio. Esas reglas están repartidas entre muchas hojas de estilo, sentencias @import anidadas y etiquetas <style> en línea, lo que hace muy tedioso encontrarlas a mano. Un extractor de fuentes las lee todas por ti.

Datos clave de FontExtractor

Cómo usar el extractor de fuentes desde URL

Usar nuestro extractor de fuentes desde URL lleva menos de un minuto:

1. Copia la dirección de la página cuya tipografía quieres analizar. Sirve cualquier página pública, no solo la portada.
2. Pégala en el cuadro de la parte superior y pulsa Extraer fuentes. Puedes omitir https://; lo añadimos nosotros.
3. Revisa los resultados. Cada familia aparece como una tarjeta, mostrada con su propia tipografía, con todos sus grosores y estilos debajo.
4. Prueba tu propio texto en el campo de vista previa y ajusta el tamaño para ver cómo se comporta la fuente en un titular o en un párrafo.
5. Descarga o copia. Guarda archivos individuales, descarga el conjunto completo en un ZIP con su fonts.css o copia el CSS @font-face de una familia.

¿Qué fuentes puede detectar un extractor de fuentes web?

FontExtractor detecta las fuentes que una página declara en su HTML y CSS: archivos autoalojados, Google Fonts, Adobe Fonts, fuentes variables y fuentes incrustadas en base64, en formatos WOFF2, WOFF, TTF, OTF, EOT y SVG.

FontExtractor sigue el mismo camino que un navegador al mostrar una página. Descarga el HTML, descubre cada hoja de estilo enlazada (incluidos los trucos de carga preload y print-then-all que usan los sitios optimizados), sigue las cadenas @import varios niveles y analiza cada bloque @font-face. El resultado incluye:

• Fuentes autoalojadas servidas desde el propio dominio o la CDN del sitio.
• Google Fonts, con cada subconjunto unicode, como latin, latin-ext o cyrillic.
• Adobe Fonts (Typekit) y otros servicios tipográficos que se entregan mediante CSS.
• Fuentes variables, con su rango de grosor completo, por ejemplo 100–900.
• Fuentes base64 incrustadas directamente en la hoja de estilo como URIs data:.
• Fuentes precargadas declaradas con <link rel="preload" as="font">.
• Todos los formatos habituales: WOFF2, WOFF, TTF, OTF, EOT y SVG. Si una regla ofrece varios, se elige automáticamente el más eficiente.

Además de los archivos descargables, la herramienta muestra las pilas de fuentes que pide el CSS. Así sabrás si un sitio depende de fuentes del sistema como -apple-system, Segoe UI o Helvetica Neue, que ningún extractor puede descargar porque están instaladas en el dispositivo del visitante.

Por qué diseñadores y desarrolladores extraen fuentes

La tipografía transmite gran parte de la personalidad de una marca, por eso «¿qué fuente es esta?» es una de las preguntas más habituales en diseño. Estas son las situaciones en las que un extractor de fuentes ahorra más tiempo:

• Inspiración e investigación. Crea moodboards y compara cómo combinan los mejores productos sus fuentes de titulares y de texto.
• Desarrollo front-end. Reproduce un diseño con fidelidad, depura una fuente que no carga o comprueba qué formatos sirve un sitio.
• Auditorías de marca. Verifica que todas las páginas de tu web cargan las tipografías aprobadas y ningún archivo antiguo olvidado.
• Revisiones de rendimiento. Detecta webs que cargan demasiados grosores o que todavía sirven pesados TTF en lugar de WOFF2.
• Trabajo con clientes. Cuando un cliente no sabe qué fuentes usaba su web anterior, el extractor las recupera en segundos.

¿Puedes usar las fuentes que extraes de un sitio web?

Poder descargar un archivo de fuente no significa que puedas usarlo. Las fuentes son software, y la mayoría de las tipografías comerciales se licencian por sitio web, por aplicación o por número de visitas. Muchas fuentes de la web son de código abierto —casi todo lo que sirve Google Fonts usa la licencia SIL Open Font License, por ejemplo—, pero las familias premium de fundiciones o de Adobe Fonts solo están licenciadas para el sitio que las compró.

Usa FontExtractor para identificar fuentes, evaluarlas y probarlas en local. Antes de publicar una fuente en tu propio proyecto, revisa su licencia y, si hace falta, cómprala a la fundición. Apoyar a los diseñadores tipográficos es lo que permite que sigan naciendo grandes tipografías.

Extractor de fuentes frente a DevTools y extensiones

Usa un extractor de fuentes online para ver de una vez todas las fuentes de una página. Usa las DevTools del navegador o una extensión para páginas que requieren iniciar sesión o fuentes añadidas con JavaScript.

Puedes buscar fuentes a mano con las herramientas para desarrolladores del navegador: inspecciona un elemento, abre el panel Computed y busca las solicitudes de fuentes en la pestaña Network. Funciona para un elemento, pero se vuelve lento cuando un sitio usa varias familias, subconjuntos unicode y fuentes variables. Las extensiones ayudan, pero hay que instalarlas, conceden permisos en cada web que visitas y suelen mostrar solo la fuente del elemento bajo el cursor.

Un extractor de fuentes web online no necesita instalación, funciona en cualquier dispositivo —también en móviles y tabletas— y devuelve de una vez el inventario tipográfico completo de la página, con vistas previas, nombres de archivo limpios y CSS descargable.

Consejos para obtener los mejores resultados

Para obtener los mejores resultados, analiza la página exacta que te interesa y, si no aparecen fuentes, prueba directamente la URL de una de sus hojas de estilos.

• Analiza la página exacta que te interesa. Las landing pages, los blogs y la documentación suelen cargar fuentes distintas.
• Si un sitio no devuelve fuentes, puede que genere sus estilos con JavaScript tras cargar. Prueba a analizar directamente la URL de una de sus hojas de estilo.
• Algunas webs bloquean las solicitudes automáticas con protección antibots. Si un análisis falla, inténtalo más tarde o prueba otra página del mismo dominio.
• Para la web, prefiere los archivos WOFF2: son los más ligeros y todos los navegadores modernos los admiten.
• Conserva las reglas unicode-range del CSS copiado para que el navegador descargue solo los subconjuntos que necesita cada página.

¿Quieres saber qué fuentes usa tu web favorita? Vuelve arriba, pega el enlace y deja que el extractor de fuentes haga el trabajo.