Encontrar fuentes con Chrome & Firefox DevTools
Las DevTools del navegador te permiten inspeccionar la fuente exacta renderizada en cualquier elemento. Así es como usarlas - y cuándo el escáner de URL es la opción más rápida.
Chrome DevTools - Fuentes renderizadas
- 1Haz clic derecho en cualquier texto y selecciona Inspeccionar (o pulsa Ctrl+Mayús+I / Cmd+Opción+I).
Ver captura completaClic derecho en cualquier texto, luego clic en Inspeccionar - 2Chrome abre el panel Elementos con el elemento clicado ya resaltado en el árbol DOM.
- 3En el panel derecho, haz clic en la pestaña Calculado (segunda pestaña, junto a Estilos).
- 4Desplázate más allá de las propiedades CSS hasta la sección Fuentes renderizadas.
Ver captura completaPestaña Calculado - desplázate hasta "Fuentes renderizadas" para ver la tipografía activa - 5Verás la tipografía exacta usada por el navegador, el archivo fuente cargado y cuántos glifos dibujó desde él.
Firefox DevTools - Pestaña Fuentes
- 1Haz clic derecho en cualquier texto y selecciona Inspeccionar (o pulsa F12). Se abre el panel Inspector.
- 2En el panel derecho del Inspector (donde normalmente ves Reglas y Calculado), haz clic en la pestaña Fuentes.
- 3La columna izquierda lista todas las fuentes cargadas en la página. Haz clic en un nombre para ver su muestra, rango de peso, formato y URL de origen.
Ver captura completaPestaña Fuentes de Firefox - todas las fuentes de la página listadas a la izquierda, detalles a la derecha
Limitaciones del enfoque DevTools
Las DevTools funcionan bien para inspeccionar elementos individuales, pero no te darán un inventario completo de todas las fuentes cargadas por una página. Para una auditoría completa - pega la URL a continuación.
Más rápido: escanear la página completa por URL
Pega cualquier URL y obtén la lista completa de todas las fuentes web usadas - cada regla @font-face, importación de Google Fonts y enlace CDN - en un solo escaneo.
Preguntas frecuentes
¿Qué son las "Fuentes renderizadas" en Chrome?
Fuentes renderizadas muestra la tipografía real que el navegador usó para dibujar el texto seleccionado - tras aplicar los fallbacks de font-family. Puede diferir de la declaración CSS font-family.
¿Por qué la fuente renderizada difiere de font-family en CSS?
font-family es una lista de fallbacks priorizada. Si la primera fuente falla al cargar, el navegador pasa al siguiente candidato. Fuentes renderizadas muestra lo que se usó realmente.
¿Puedo encontrar todas las fuentes de una página con DevTools?
La pestaña Fuentes de Firefox muestra todas las fuentes cargadas. Chrome requiere inspeccionar elemento por elemento. Para un inventario completo, usa el escáner URL.
¿El escáner URL también detecta Google Fonts?
Sí - se detectan todas las fuentes: Google Fonts, Bunny Fonts, Fontshare y fuentes @font-face autoalojadas.