Combinación de Fuentes
La herramienta de combinación de fuentes muestra 12 combinaciones seleccionadas de Google Fonts para títulos y texto, te permite mezclar fuentes a tu gusto y copia el @import de CSS correspondiente.
Acerca de esta herramienta
La herramienta de combinación de fuentes muestra 12 combinaciones seleccionadas de Google Fonts para títulos y texto, te permite mezclar fuentes a tu gusto y copia el @import de CSS correspondiente.
Cómo se usa
- Elige una de las combinaciones seleccionadas, o escoge tú mismo una fuente para títulos y otra para el texto.
- Usa Combinación aleatoria para explorar opciones.
- Lee la vista previa en vivo del título y del párrafo.
- Haz clic en Copiar @import de CSS para cargar las fuentes en tu sitio.
Datos útiles
- Una combinación clásica contrasta una serif con una sans-serif, como Playfair Display con Source Sans 3.
- Las combinaciones incluyen Montserrat + Merriweather, Raleway + Lato, Space Grotesk + Inter y DM Serif Display + DM Sans.
- Limitar un sitio a dos familias tipográficas mantiene las páginas coherentes y reduce el tamaño de descarga.
- La vista previa carga las fuentes elegidas desde Google Fonts en los pesos 400 y 700.
- Añadir display=swap a la URL de la fuente muestra un texto alternativo mientras se carga la fuente web.
Funciona por completo en tu navegador: nada de lo que introduces se sube ni se guarda.
Preguntas frecuentes
¿Qué fuentes combinan bien?
Suelen combinar bien las fuentes de estilos contrastados pero proporciones similares, como un título en serif de alto contraste con un texto en sans-serif limpia. Las combinaciones seleccionadas aquí están probadas.
¿Cuántas fuentes debe usar un sitio web?
Dos familias, una para títulos y otra para el texto, bastan para la mayoría de los sitios. Rara vez hace falta una tercera.
¿Las Google Fonts son gratis para uso comercial?
Sí. Las fuentes de la biblioteca de Google Fonts se publican con licencias abiertas como la SIL Open Font License y se pueden usar comercialmente.
¿Cómo añado las fuentes a mi sitio?
Pega el @import copiado al principio de tu CSS, o conviértelo en una etiqueta link en el head de tu HTML, y luego define font-family en tus títulos y en el body.