Explorador de combinaciones de fuentes

¿Qué es Explorador de combinaciones de fuentes?

El Explorador de Combinaciones de Fuentes es una herramienta gratuita en el navegador para diseñadores web, desarrolladores y creadores de contenido que buscan una combinación elegante de título y cuerpo sin rastrear bibliotecas de fuentes. Incluye un conjunto seleccionado de combinaciones probadas de Google Fonts —como Playfair Display con Source Sans 3, o Poppins con Inter— y muestra cada una renderizada en una vista previa en vivo. Elige una combinación en la configuración, escribe tu propio titular y texto de cuerpo de muestra y observa cómo la vista previa se actualiza al instante. Cuando te guste lo que ves, copia el CSS generado, que incluye una sola línea @import para la hoja de estilos de Google Fonts más reglas font-family para títulos y cuerpo. Úsalo para prototipar páginas de aterrizaje, temas de blog, presentaciones o sistemas de diseño, o simplemente para aprender qué tipografías se complementan.

Cómo usar Explorador de combinaciones de fuentes

1. Abre la configuración y elige una combinación de la lista de combinaciones seleccionadas de Google Fonts.
2. Espera un momento a que las fuentes se carguen desde la API de Google Fonts CSS; la vista previa cambia a las nuevas tipografías cuando llegan.
3. Escribe tu propio texto de muestra para ver las fuentes de título y cuerpo con palabras reales, o déjalo en blanco para usar la muestra predeterminada.
4. Lee la nota sobre la carga externa de fuentes para saber que provienen de fonts.googleapis.com.
5. Copia el fragmento de CSS generado —la línea @import y las reglas font-family de título y cuerpo— y pégalo en tu hoja de estilos.

Ejemplos

Combinación: Playfair Display + Source Sans 3

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400&display=swap');

Combinación: Poppins + Inter

h1, h2, h3 { font-family: 'Poppins', serif; font-weight: 600; }

Preguntas frecuentes

¿Qué combinaciones de fuentes se incluyen?

Un conjunto seleccionado de combinaciones populares de título y cuerpo de Google Fonts, entre ellas Playfair Display + Source Sans 3, Montserrat + Merriweather, Poppins + Inter, Lora + Roboto, Oswald + Open Sans, Raleway + Lato, Space Grotesk + IBM Plex Sans y DM Serif Display + DM Sans. Elige una en la configuración.

¿De dónde provienen las fuentes?

Cuando seleccionas una combinación, tu navegador carga la hoja de estilos correspondiente directamente desde la API pública de Google Fonts CSS en fonts.googleapis.com. Es una petición a terceros hecha directamente desde tu navegador; las fuentes no pasan por nuestros servidores.

¿Es privado mi texto de muestra?

Sí. El titular y el texto de cuerpo de muestra que escribes permanecen por completo en tu navegador y solo se usan para renderizar la vista previa local. Nunca se envían a ningún sitio, y el CSS generado solo contiene los nombres de las fuentes de la combinación, no tu texto.

¿Qué contiene exactamente el CSS copiado?

Una sola línea @import que carga la hoja de estilos de Google Fonts para ambas tipografías, seguida de reglas font-family y font-weight: un grupo para los títulos h1/h2/h3 y otro para el cuerpo. Pégalo al inicio de tu hoja de estilos.

¿Por qué la vista previa aparece en blanco o sin estilo un momento?

Las fuentes deben descargarse desde Google antes de poder renderizarse. Aparece una breve nota de carga hasta que llega la hoja de estilos; si falla (por ejemplo, sin conexión), se muestra una nota de error y la vista previa recurre a las fuentes predeterminadas de tu navegador.