Listar Todas las Fuentes escanea cualquier página web y presenta un inventario completo de cada familia tipográfica en uso — fuentes web cargadas desde CDNs, fuentes auto-alojadas y fuentes del sistema como respaldo. Cada fuente muestra una vista previa de texto en vivo, los pesos y estilos cargados, el número de elementos que la usan y copia con un clic de la declaración CSS font-family.
Identificar fuentes en un sitio web que admiras solía requerir inspeccionar elementos uno por uno en DevTools, verificar la propiedad calculada font-family o usar extensiones de navegador que solo detectan una fuente a la vez. Listar Todas las Fuentes te da el panorama completo en una vista — cada fuente cargada y usada en la página, con muestras de texto en vivo mostrando exactamente cómo se renderiza cada fuente. La herramienta diferencia entre fuentes web (cargadas vía @font-face o Google Fonts) y fuentes del sistema (Arial, Helvetica, Georgia, etc.), mostrando la pila completa de font-family. Para cada fuente, ves qué pesos están cargados (400, 600, 700), qué elementos la usan y qué tamaños de fuente se aplican. Haz clic en cualquier fuente para copiar su declaración CSS — lista para pegar en tu propio proyecto. La vista previa en vivo usa el renderizado real de la fuente desde la página, no una vista previa genérica, por lo que ves exactamente cómo se ve la fuente en los tamaños y pesos usados en el sitio.
Lista cada font-family realmente renderizada en la página, incluyendo fuentes web de Google Fonts, Adobe Fonts o declaraciones @font-face personalizadas, y fuentes del sistema como respaldo. Muestra el conteo total de familias tipográficas únicas encontradas.
Cada fuente se muestra con una muestra de texto en vivo ("El veloz murciélago hindú comía feliz cardillo y kiwi") renderizada usando el archivo de fuente real cargado en la página. Ves el renderizado real — no una vista previa genérica.
Para cada fuente, ve qué pesos están cargados (Regular 400, Medium 500, SemiBold 600, Bold 700) y si hay variantes itálicas disponibles. Te ayuda a entender el subconjunto cargado de la fuente.
Ve cuántos elementos en la página usan cada fuente. La fuente más utilizada se lista primero. Sabe qué fuentes son primarias (texto del cuerpo) y cuáles son secundarias (usadas solo en unos pocos elementos).
Haz clic en cualquier entrada de fuente para copiar su declaración CSS font-family completa (p. ej., font-family: 'Inter', sans-serif) al portapapeles. Lista para pegar directamente en tu hoja de estilos.
Cada fuente muestra su origen: Google Fonts (con la URL específica), Adobe Fonts, auto-alojada (con la URL @font-face) o fuente del sistema. Sabe exactamente de dónde proviene cada fuente.
Visita un sitio web con hermosa tipografía e instantáneamente ve cada fuente que usa — nombres, pesos y de dónde vienen. No más adivinar "¿qué fuente es esa?" o usar herramientas poco confiables de identificación de fuentes.
¿Cuántas fuentes carga tu página? ¿Hay fuentes sin usar que se descargan pero no se aplican? Listar Todas las Fuentes muestra el uso real — si una fuente cargada tiene 0 elementos usándola, es ancho de banda desperdiciado.
Documenta la tipografía de tu proyecto ejecutando Listar Todas las Fuentes en cada página. Verifica que las fuentes y pesos correctos se usen consistentemente en todo el sitio — detecta declaraciones de font-family no autorizadas.
¿Identificaste una fuente que te gusta pero es una fuente de pago? Copia el nombre de la fuente y busca alternativas gratuitas con características similares. La vista previa en vivo te ayuda a recordar exactamente cómo se veía.
Ejecuta Listar Todas las Fuentes en la misma página en diferentes navegadores para verificar que las mismas fuentes se rendericen en todas partes. Las pilas de fuentes del sistema se resuelven de manera diferente en los sistemas operativos — detecta inconsistencias.
Abre el dock flotante de DevSuite Pro y haz clic en el ícono de Listar Todas las Fuentes. La herramienta escanea los estilos calculados de la página y las reglas @font-face.
Un panel muestra todas las fuentes encontradas en la página, ordenadas por frecuencia de uso. Cada entrada muestra el nombre de la fuente, texto de vista previa, pesos y conteo de elementos.
Desplázate por las vistas previas en vivo para ver cómo se renderiza cada fuente. Compara la fuente de encabezado frente a la fuente del cuerpo frente a la fuente de acento.
Haz clic en cualquier entrada de fuente para copiar su declaración CSS font-family. Haz clic en el enlace de origen para visitar el origen de la fuente (página de Google Fonts, URL del CDN, etc.).
Pega la declaración font-family en tu CSS y carga la fuente desde la misma fuente para usarla en tu propio proyecto.
Instala DevSuite Pro gratis y desbloquea más de 39 herramientas de desarrollador para tu navegador.
