Herramienta gratuita, sin registro

¿Qué fuente usa este sitio web?

Pega una URL para ver qué fuentes usa un sitio web, con pesos, tamaños y dónde aparece cada una. Gratis, sin registro. Mira ejemplos como las fuentes de Anthropic y las fuentes de Airbnb, o descubre qué aporta además un DESIGN.md.

Prueba

Usa estas fuentes en tu código

El buscador te da los nombres de las familias, sus pesos y dónde se usa cada una. Para reutilizarlas, carga cada familia una sola vez, da a cada rol una variable CSS y termina siempre la pila con fuentes de respaldo para que el texto se vea mientras se descarga la fuente o si no llega a cargar.

1. Carga la fuente. Para una familia de Google Fonts, añade su etiqueta <link> o usa next/font/google, y pide solo los pesos que mostró el buscador. Para una fuente comercial, compra una licencia web a la fundición y sirve sus archivos con @font-face.

2. Nombra los roles. Una variable por función: display para los títulos, body para el texto corrido, mono para el código. Cambia los nombres de las familias por los que encontraste.

:root {
  --font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }
body { font-family: var(--font-body); font-weight: 400; }
code, pre { font-family: var(--font-mono); }

3. Úsalas en Tailwind. Las mismas pilas se convierten en las utilidades font-display, font-sans y font-mono.

/* app.css, Tailwind CSS v4 */
@theme {
  --font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

Las familias son la mitad de un sistema tipográfico. Los tamaños, interlineados y espaciados entre letras de cada nivel están en la sección de tipografía de un DESIGN.md, que tu agente de programación puede aplicar en todas las pantallas.

Preguntas frecuentes

Preguntas sobre el buscador de fuentes

Respuestas breves sobre el Buscador de fuentes de sitios web gratuito.

Abre la página en un navegador real y lee la fuente calculada de cada fragmento de texto visible: la familia que el navegador renderizó de verdad, con su peso y su tamaño. Después agrupa las familias y las ordena según cuánto texto componen.

No. Las fuentes son software con licencia, y la licencia de un sitio suele cubrir solo ese sitio. Si la familia está en Google Fonts, puedes conseguirla allí gratis; si no, busca su fundición y compra una licencia para tu propio uso.

Lee solo la página que escribes y muestra hasta ocho familias. Solo ve el texto que esa página muestra a un visitante nuevo: no lee el texto detrás de un inicio de sesión, las páginas que bloquean navegadores automatizados ni las letras dibujadas como imágenes o SVG, así que sus fuentes no aparecen.

Sí. Detecta cualquier fuente web que renderice la página, venga de Google Fonts, de Adobe Fonts o de los propios servidores del sitio. Las fuentes de Google se muestran con su diseño real; las demás, con una fuente de respaldo.

Sí, elemento por elemento. En Chrome o Edge, haz clic derecho en el texto, elige Inspeccionar y baja en la pestaña Calculado hasta Fuentes renderizadas, que nombra la fuente que se dibuja de verdad. En Firefox, el panel Tipografías del Inspector muestra las fuentes del elemento seleccionado y todas las fuentes que cargó la página.

Esta herramienta solo muestra fuentes. Un DESIGN.md de Design Extractor cubre los colores, la escala tipográfica completa, el espaciado y las reglas de componentes de un sitio, en un archivo que tu agente de programación puede seguir.

Más herramientas gratuitas

Ver todas las herramientas gratuitas

¿Necesitas el sistema de diseño completo?

Obtén un DESIGN.md con los colores, la escala tipográfica, el espaciado y los componentes de cualquier sitio, listo para tu agente de programación.

Obtén un DESIGN.md