Las mejores fuentes para webs: 30 Google Fonts gratis en diseños reales

Las mejores fuentes para webs se leen bien a tamaños pequeños, cargan rápido y encajan con la marca: Inter o Geist para webs de producto, Source Serif 4 o Newsreader para lectura, Rubik o Nunito para negocios locales. Aquí tienes 30 Google Fonts gratis mostradas en vivo, con licencias, ejes variables y CSS para copiar y pegar.

Actualizado el 13 de octubre de 2026

Estas son 30 fuentes gratuitas de Google Fonts que funcionan bien en webs reales, ordenadas según la tarea que mejor cumplen. Cada una se muestra abajo en un titular, un párrafo y un botón, con su licencia, si es una fuente variable, los pesos que incluye, una pila de respaldo y un fragmento listo para copiar. Los datos se comprobaron con el catálogo de Google Fonts y los archivos de licencia del repositorio de Google Fonts en octubre de 2026.

Elecciones rápidas

• SaaS o app: Inter o Geist para todo, o Plus Jakarta Sans para una landing page más cálida.
• Blog o publicación: Source Serif 4 o Newsreader para el texto de cuerpo, con una sans para la navegación.
• Negocio local: Rubik, Nunito o Work Sans, legibles en el móvil y cercanas.
• Marca premium o clásica: Playfair Display o EB Garamond para los titulares, con una sans discreta para el texto de cuerpo.
• Muchos idiomas: Noto Sans.

Prueba tu propio texto

Escribe abajo para sustituir el texto de ejemplo en todas las vistas previas de esta página. Las fuentes se cargan desde Google Fonts cuando abres esta sección; hasta entonces cada vista previa muestra su pila de respaldo, que es también lo que ven los visitantes durante un momento mientras se descarga una fuente web.

Las 30 fuentes de un vistazo

Las 30 se publican bajo la SIL Open Font License 1.1, que permite el uso comercial, la inclusión en webs y el alojamiento propio, y te deja modificar las fuentes siempre que no vendas los archivos de fuente por sí solos ni reutilices los nombres de fuente reservados en versiones modificadas. Unas pocas familias de Google Fonts usan otras licencias abiertas: algunas están bajo la Apache License 2.0 (por ejemplo Permanent Marker y Special Elite) y la familia Ubuntu usa la Ubuntu Font Licence. Comprueba siempre la licencia que aparece en la página de cada familia en fonts.google.com antes de publicarla.

<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Geist:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=DM+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Figtree:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Merriweather:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Merriweather", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Lora:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Lora", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Playfair Display", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Source Serif 4", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "EB Garamond", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Fraunces:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Fraunces", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Newsreader:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Newsreader", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

/* CSS */
font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Nunito:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Rubik:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Work+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">

/* CSS */
font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Archivo:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

Cómo cargar una Google Font

Pon estas líneas en el <head> de tu página, antes de tu propia hoja de estilos. Las dos pistas preconnect permiten al navegador abrir pronto las conexiones con el host de la hoja de estilos y con el host de los archivos de fuente; los archivos de fuente se sirven desde otro dominio y se descargan en modo CORS, y por eso la segunda pista lleva crossorigin.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Source+Serif+4:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">

body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
h1, h2, h3 { font-family: "Source Serif 4", Georgia, "Times New Roman", serif; }

Cómo leer la URL de css2

• family=Inter:[email protected] pide un rango de pesos de una fuente variable. Acota el rango a lo que uses; el navegador sigue descargando un archivo por subconjunto.
• family=Lato:wght@400;700 pide dos pesos estáticos concretos. En las familias estáticas, cada peso que indicas es un archivo más.
• ital,wght@0,400..700;1,400..700 añade los estilos en cursiva. Los nombres de los ejes van en orden alfabético, las minúsculas antes que las mayúsculas.
• Repite family= para cargar varias familias en una sola petición.
• display=swap establece font-display: swap en las reglas @font-face devueltas, así que el texto aparece de inmediato con la fuente de respaldo y cambia cuando llega la fuente web, en lugar de quedarse invisible.
• text=Hello devuelve un archivo que solo contiene esos caracteres, algo útil para la palabra de un logo escrita en una fuente que no usas en ningún otro sitio.

Opciones de font-display

Alojamiento propio

Como estas fuentes tienen licencia abierta, puedes servir los archivos desde tu propio dominio en lugar del de Google. Motivos por los que se hace: una conexión de terceros menos, control total sobre la caché y privacidad, ya que las peticiones a los servidores de Google envían a Google la dirección IP del visitante, algo que algunos propietarios de webs europeas prefieren evitar. Formas de hacerlo:

• Descarga la familia desde su página en fonts.google.com, convierte o conserva los archivos WOFF2 y escribe tus propias reglas @font-face .
• En un proyecto JavaScript, instala la familia desde Fontsource (por ejemplo npm install @fontsource-variable/inter) e impórtala en tu archivo de entrada.
• Los proyectos Next.js pueden usar next/font/google, que descarga los archivos en tiempo de build y los sirve desde tu propio dominio.

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;      /* the variable range */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF;
}

Si alojas las fuentes tú mismo, precarga solo el archivo que necesita el texto de la parte visible sin desplazarse, con <link rel="preload" href="/fonts/inter-latin-var.woff2" as="font" type="font/woff2" crossorigin>. Precargar varias fuentes hace que compitan con tus imágenes y scripts.

Notas sobre fuentes variables

Una fuente variable es un único archivo que contiene un rango continuo a lo largo de uno o más ejes, en lugar de un archivo por peso. 28 de las 30 fuentes de esta página son variables; Poppins y Lato son estáticas.

• El peso (wght) se controla con la propiedad habitual font-weight , y sirve cualquier número dentro del rango: font-weight: 650 es válido.
• El ancho (wdth), que aquí ofrecen Roboto, Open Sans, IBM Plex Sans, Noto Sans, Archivo y Merriweather, se corresponde con font-stretch en forma de porcentaje, por ejemplo font-stretch: 85%.
• El tamaño óptico (opsz), en Inter, DM Sans, Source Serif 4, Newsreader, Merriweather y Fraunces, adapta la forma de las letras al tamaño al que se componen. Los navegadores lo aplican automáticamente según el tamaño de fuente porque font-optical-sizing tiene por defecto el valor auto. Pide el eje en la URL (por ejemplo family=Inter:opsz,[email protected],100..900) para obtenerlo.
• Los ejes personalizados como los de Fraunces, SOFT y WONK , se ajustan con font-variation-settings: "SOFT" 100, "WONK" 1;. Usa las propiedades estándar de peso, ancho e inclinación en lugar de esta propiedad cuando existan, porque los valores de font-variation-settings no se combinan entre reglas.
• Un archivo variable pesa más que cualquier peso estático suelto. Compensa a partir de unos tres pesos o más, y cuando quieres pesos intermedios para ajustar con precisión.

h1 { font-weight: 780; font-stretch: 90%; }
.lede { font-weight: 350; }
.fun-heading { font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "WONK" 1; }

Fuentes web-safe y pilas de fuentes del sistema

Las fuentes "web-safe" son las que están instaladas en casi todos los ordenadores Windows y Mac, así que no necesitan descarga. No están garantizadas en Android, Linux ni en todos los iPhone, y por eso una pila de fuentes siempre termina con una familia genérica como sans-serif o serif.

Una pila de fuentes del sistema va más allá y usa la fuente de interfaz de cada sistema operativo: San Francisco en dispositivos Apple, Segoe UI en Windows, Roboto en Android y normalmente Noto u otra fuente por defecto en Linux. No cuesta nada cargarla y se ve nativa. Estas son las pilas que recomendamos en el momento de escribir esto:

/* Sans: the operating system's interface font */
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  "Helvetica Neue", Arial, "Noto Sans", sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";

/* Serif */
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

/* Monospace */
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
  "Liberation Mono", "Courier New", monospace;

system-ui es compatible con todos los navegadores principales actuales. -apple-system y BlinkMacSystemFont solo ayudan a navegadores antiguos en dispositivos Apple y puedes quitarlos si no les das soporte. ui-serif y ui-monospace no los reconocen todos los navegadores, y por eso cada pila continúa con fuentes con nombre. Las fuentes de emoji van al final para que los emoji se muestren en color.

Este párrafo usa la pila sans del sistema, así que muestra la fuente de interfaz de tu propio dispositivo.

Notas de rendimiento

• Usa menos familias y pesos. Cada peso estático, cada cursiva y cada familia extra es un archivo más. Dos familias, o una familia variable más su cursiva, cubren la mayoría de las webs.
• Prefiere WOFF2. Es el formato de fuente web más comprimido y lo admiten todos los navegadores actuales. Google Fonts lo sirve automáticamente.
• Divide en subconjuntos por idioma. La hoja de estilos de Google Fonts ya divide cada familia en subconjuntos con unicode-range, así que una página solo en inglés únicamente descarga el archivo latino. Haz lo mismo cuando alojes las fuentes tú mismo.
• Reduce el desplazamiento del diseño al cambiar de fuente. Si la fuente de respaldo y la fuente web tienen anchos distintos, el texto se recoloca cuando llega la fuente. Elige una de respaldo con proporciones parecidas, o ajústala con size-adjust, ascent-override y descent-override en una regla @font-face. next/font y algunas herramientas de build generan estos valores por ti.
• No ocultes el texto. Sin font-display: swap o optional, los navegadores pueden no mostrar texto durante un breve periodo mientras se descargan las fuentes, lo que retrasa el momento en que la página se puede leer.
• Mide, no adivines. Pasa tu página por una prueba de laboratorio antes y después de cambiar las fuentes. Nuestra guía de PageSpeed Insights explica en qué cifras influyen las fuentes.

Ideas para combinar fuentes

Combina fuentes que se diferencien claramente (una serif con una sans, o un tipo de display ancho con un tipo de texto sencillo) y que compartan algo, como una altura de x parecida o un mismo tono. Limítate a dos familias. Estas combinaciones solo usan fuentes de esta página:

Para probar más combinaciones lado a lado, usa la herramienta para combinar fuentes. Para colores que encajen con tu tipografía, consulta los esquemas de color para webs, y para diseños ya hechos que usan estas fuentes, explora los componentes de sección hero.

Preguntas frecuentes

¿Cuál es la mejor fuente para una web?

No hay una única mejor fuente, pero Inter, Source Sans 3 y Open Sans son opciones fiables para el texto de cuerpo porque siguen siendo claras a tamaños pequeños. Para los titulares, elige algo con más carácter que encaje con la marca, como Playfair Display, Fraunces o Space Grotesk.

¿Las Google Fonts son gratis para uso comercial?

Sí. Todas las familias de Google Fonts tienen una licencia abierta, sobre todo la SIL Open Font License 1.1, y algunas la Apache License 2.0 y la Ubuntu Font Licence. Las tres permiten el uso comercial en webs, en apps y en impresión. Comprueba la licencia en la página de cada familia antes de usarla.

¿Cuántas fuentes debería usar una web?

Normalmente una o dos familias. Una configuración habitual es una para los titulares y otra para el texto de cuerpo, o una sola familia con distintos pesos para ambos. Cada familia y cada peso extra añaden archivos que el navegador tiene que descargar.

¿Qué es una fuente variable?

Una fuente variable es un único archivo de fuente que contiene un rango continuo de estilos a lo largo de ejes como el peso, el ancho o el tamaño óptico. En lugar de cargar archivos separados para regular, medium y bold, cargas un solo archivo y puedes usar cualquier peso de su rango.

¿Qué son las fuentes web-safe?

Fuentes que ya están instaladas en casi todos los ordenadores Windows y Mac, como Arial, Verdana, Georgia y Times New Roman, así que no necesitan descarga. No están garantizadas en todos los móviles ni en todos los sistemas Linux, así que termina siempre una pila de fuentes con una familia genérica como sans-serif.

¿Debería alojar yo mismo las Google Fonts?

Puedes, porque las licencias lo permiten. Alojarlas tú mismo elimina una conexión a un dominio de terceros, te da control sobre la caché y mantiene las direcciones IP de los visitantes lejos de Google. Cargarlas desde Google Fonts es más sencillo y se encarga de los subconjuntos por ti. En cualquier caso, usa WOFF2 y font-display: swap.

Texto del titular

El nombre de tu empresa o tu titular

Texto del párrafo

Una frase de tu propia página de inicio

Etiqueta del botón

Reserva ahora

Tamaño del titular: {n}px

Restablecer ejemplos

Empieza gratis · Sin tarjeta de crédito

Relacionado: Guías

• Librerías de iconos SVG gratis comparadas
• Registro BIMI
• Bing Places for Business
• Ejemplos de Bootstrap 5 con equivalentes en Tailwind
• API key de Brave Search
• Diseño web brutalista
• Webs con blog
• Asuntos de correo profesional que se abren

Producto

• Creador web con IA
• Constructor de Sitios Web Marca Blanca
• Empresas
• Documentación de API

Para quién es

• Para agencias
• Para freelancers
• Para proveedores de hosting
• Para plataformas SaaS
• Para startups
• Servicios financieros
• Soluciones para salud

Funciones

• Editor de arrastrar y soltar
• SEO y analíticas
• Marca personalizada
• Panel de clientes
• Facturación para revendedores

Recursos

• Blog
• Centro de Ayuda
• Herramientas gratuitas para empresas
• Free UI Components
• Plantillas
• Colecciones de plantillas
• Ejemplos de webs
• Guías
• Comparativas
• Alternativas
• Los mejores
• Reseñas
• Guías de precios
• Glosario y guías
• Integraciones
• Desarrolladores
• Benchmark
• Windows App

Empresa

• Acerca de Nosotros
• Precios
• Solicitar acceso al programa de socios
• Contacto
• Empleos
• Seguridad
• Política de privacidad
• Términos de servicio

Mapa del sitio