¿Qué fuente usa esta web?
Hay dos formas de averiguarlo: preguntar a las herramientas para desarrolladores del navegador por un texto concreto, o dejar que una extensión lea la página entera. Aquí tienes las dos.
Con DevTools de Chrome o Edge (gratis, de elemento en elemento)
- Haz clic derecho sobre el texto y elige Inspeccionar.
- En el panel, abre la pestaña Computed (Calculado) y baja hasta el final.
- Rendered Fonts (fuentes renderizadas) muestra la tipografía que el navegador dibujó de verdad, por ejemplo
Manrope (network resource). La líneafont-familyde más arriba solo muestra lo que pidió la web, que puede ser una lista de alternativas.
Es exacto, y basta cuando te interesa un solo titular. Se vuelve lento cuando quieres el panorama completo: titulares, texto, botones, código y qué pesos se usan.
Con Stylasso (toda la página de una vez)
Haz clic en el icono y Stylasso lista todas las fuentes que la página renderiza, con su función (titulares, texto, monoespaciada), los pesos en uso, de dónde se cargan (Google Fonts, Adobe Fonts, alojada en el propio servidor o fuente del sistema) y una muestra dibujada con esa fuente. Lo probamos en tres webs de demostración que creamos:
- Northwind RoastersHanken Grotesk, texto, pesos 400, 500, 600Northwind Roasters (cafetería), desde Google Fonts
- Northwind RoastersFraunces, titulares, pesos 600Northwind Roasters (cafetería), desde Google Fonts
- Northwind RoastersJetBrains Mono, mono, pesos 400Northwind Roasters (cafetería), desde Google Fonts
- LedgerlineManrope, titulares y texto, pesos 400, 500, 600, 800Ledgerline (fintech), desde Google Fonts
- AfterhoursSpace Grotesk, titulares y texto, pesos 400, 500, 700Afterhours (herramienta para desarrolladores, oscura), desde Google Fonts
La escala tipográfica viene incluida: cada tamaño de titular y de texto con su peso, interlineado y espaciado entre letras, con los nombres de los pasos de Tailwind.
Cuando la fuente no es gratuita
Si una web usa una fuente comercial, lo más probable es que tu proyecto no tenga licencia para usarla. Stylasso las marca y te da la fuente gratuita de Google más parecida, y sus exportaciones de CSS, Tailwind y DESIGN.md cargan esa alternativa gratuita con un comentario, para que lo que construyas se parezca y siga siendo legal.
Preguntas
¿Por qué DevTools muestra una fuente distinta a la del CSS?
El CSS enumera, por orden, lo que la web querría usar. Si la primera fuente no carga o le falta un carácter, el navegador pasa a la siguiente. Rendered Fonts en DevTools y Stylasso informan de lo que realmente se dibujó.
¿Puedo descargar los archivos de la fuente?
Stylasso no exporta archivos de fuentes; pertenecen a su autor. Te dice el nombre y el origen para que la consigas de forma correcta, muchas veces gratis en Google Fonts.
¿Sirve para texto dentro de imágenes?
No. Lee texto real de páginas web. Para una fuente dentro de una imagen o un logo, lo adecuado es un servicio de identificación de fuentes que compare formas.