Probar Fuentes y Parejas

Previsualiza parejas de Google Fonts, espaciado y estilos.

Configuración de tipografía

Fuente del título

Fuente del cuerpo

Tamaño del título36px

Grosor del título

Tamaño del cuerpo16px

Grosor del cuerpo

Combinaciones populares

Tech modernoPoppins + InterEditorial clásicoPlayfair Display + LoraCorporativo audazMontserrat + Open SansMonoespaciado limpioJetBrains Mono + RobotoNoticias cálidasMerriweather + Lato

Exportar código CSS

/* CSS Integration */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lora:wght@400;700&display=swap');

h1.custom-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 36px;
}

p.custom-body {
  font-family: 'Lora', serif;
  font-weight: 400;
  font-size: 16px;
}

Cómo funciona

Elige fuentes de Google Fonts para combinar y previsualizar.
Escribe tu propio texto en la vista previa editable en vivo.
Ajusta el tamaño, el grosor y el espaciado para probar la tipografía.
Exporta el CSS para usar la combinación en tu proyecto.

Para qué se usa

Probar una combinación de fuentes de titular/cuerpo antes de decidirte.
Previsualizar cómo se ve el texto real en una fuente.
Obtener el CSS para incrustar una combinación de Google Fonts.

Bueno saberlo

Carga las fuentes desde Google Fonts, así que previsualizar una fuente la descarga de Google (el único punto en que esta herramienta no funciona del todo sin conexión).
El renderizado puede variar ligeramente entre sistemas operativos y navegadores.

Preguntas frecuentes

¿Usa mi propio texto?

Sí: la vista previa es editable, así que puedes pegar titulares y párrafos reales en lugar de texto de relleno.

¿Puedo obtener el CSS?

Sí: exporta el CSS para incrustar en tu sitio la combinación de Google Fonts elegida.

¿Es totalmente sin conexión?

Casi: todo se ejecuta en tu navegador, pero previsualizar una fuente de Google descarga el archivo de la fuente desde Google. Ningún texto que escribas se sube.

Herramientas relacionadas

Visor DXF

Paleta de Colores

Conversor de Color

Generador de Box Shadow CSS

Verificador de Contraste