Familia y pesos cargados
Saber qué variantes necesitas, no solo el nombre
Tipografía
Qué fuente usa una web, con su licencia y su escala
Smart Design Inspector muestra qué fuentes usa una web, sus pesos, de dónde se cargan (Google Fonts, Adobe Fonts o el propio servidor), su licencia y la escala tipográfica de la página: cada estilo con tamaño, peso e interlineado.
Fuentes, origen, licencia y escala: gratis para siempre
Fuentes · tucliente.example
- Inter300 · 400 · 500 · 600Google FontsOFL
- Playfair Display400 · 400 cursiva · 700Google FontsOFL
- JetBrains Mono400PropiaOFL
- H164 px · 500 · 1,04
- H236 px · 500 · 1,1
- H317 px · 500 · 1,3
- Cuerpo16 px · 300 · 1,55
- Botón15 px · 500 · 1
01
Cómo saber qué fuente usa una web
3 pasos- 01
Instala Smart Design Inspector y abre la web.
- 02
Pulsa el icono y elige Fuentes.
- 03
Ves la lista de familias con sus pesos y su origen. Pasa el ratón por un texto para ver su estilo exacto.
Sin extensión
Sin extensión también se puede: clic derecho sobre el texto, Inspeccionar y buscar font-family en el panel de estilos. El problema es que font-family dice la fuente que se pidió, no si se cargó, de dónde viene ni qué licencia tiene.
02
Pruébalo en esta página
Sin instalarUna web de ejemplo y el panel de fuentes, sin instalar nada. Pasa el ratón por un texto, o elígelo en la lista, y ves su familia, su peso, su tamaño, su interlineado, su origen y su licencia.
Elige un elemento
Smart Design Inspector · Fuentesh1.hero-title
- Familia
- —
- Peso
- —
- Estilo
- —
- Tamaño
- —
- Interlineado
- —
- Espaciado
- —
- Origen
- —
- Licencia
- —
Familias en la página
—
Web de ejemplo · los valores se leen de esta página
03
Más que el nombre de la fuente
4 datosOrigen: Google Fonts, Adobe Fonts o propia
Saber si puedes usarla gratis o si hay que comprarla
Licencia
Las de Google Fonts son OFL. En las demás se lee la licencia que declara el propio archivo
Escala tipográfica
H1 a H6, cuerpo y botones con tamaño, peso, interlineado y espaciado
La escala es lo que necesitas para replicar el estilo, y las extensiones de fuentes miran letra a letra. Con la Pro la exportas a Tailwind o a variables CSS: extraer el sistema de diseño.
| Gratis0 €para siempre | Pro49 €pago único | |
|---|---|---|
| Fuentes de la página: familia, pesos, tamaños, origen y licencia | ||
| Escala tipográfica: cada estilo de texto con fuente, tamaño, peso, interlineado y espaciado | ||
| Exportar los estilos tipográficos a Tailwind v4 @theme, variables CSS o DESIGN_SPECS.md | — | Acceso anticipado gratis |
05
Lo que no hace
LímitesNo descarga fuentes de pago. Te enseña la licencia y dónde conseguirlas. Si la fuente es de licencia libre, puedes descargarla. Tampoco identifica fuentes a partir de una imagen: para eso existen herramientas como WhatTheFont.
¿Es gratis?
Sí. Ver las fuentes, su origen, su licencia y la escala es gratis para siempre.
¿Detecta fuentes de Adobe Fonts?
Sí. Detecta las que se cargan desde Adobe por la dirección de la que vienen.
¿Y si la web usa una fuente del sistema?
La extensión indica que no se carga ninguna fuente web y muestra la familia declarada.
¿Puedo usar la fuente que encuentre?
Depende de su licencia. Las de Google Fonts se pueden usar en cualquier proyecto. Las comerciales hay que comprarlas aunque otra web las use.
¿Funciona con texto dentro de imágenes?
No. Lee el texto de la página, no el que está dentro de una imagen.
¿En qué navegadores y sistemas funciona?
En Chrome, Edge, Brave, Arc, Opera y Vivaldi, en Windows, Mac y Linux, desde la 1.0. Funciona igual en todos porque la extensión la ejecuta el navegador, no el sistema. El código está preparado para llevarla a Firefox y Safari sin reescribirla. Mientras está en desarrollo, puede haber cambios.
07
Sigue con
Funciones cercanasColores
La paleta de la página, cuentagotas y contraste WCAG de cada pareja de texto y fondo.
Colores de una web →Sistema de diseño
Colores, espaciados y tipografía a Tailwind v4 @theme, variables CSS o DESIGN_SPECS.md.
Extraer el sistema de diseño →Inspector CSS
Pasa el ratón y ve el CSS calculado, la caja, los márgenes y las distancias.
Inspector CSS →Lista de espera
Sé de los primeros en probarlo
Smart Design Inspector está en desarrollo. Déjanos tu email y te avisamos el día que salga en la Chrome Web Store, con las 3 funciones Pro gratis en acceso anticipado.
Un email el día del lanzamiento y pocos más · Baja con un clic