Buscador de Pares de Google Fonts

Acerca del Buscador de Pares de Google Fonts

Encuentra las combinaciones perfectas de Google Fonts para tus proyectos web. Previsualiza pares de fuentes de título y cuerpo en tiempo real con diferentes tipos de contenido y obtén código CSS instantáneo.

¿Qué hace que dos fuentes combinen bien?

Las buenas combinaciones aportan contraste visual manteniendo la armonía — típicamente mezclando una serif y una sans-serif, o dos fuentes con pesos o proporciones claramente distintos. La regla clásica de The Elements of Typographic Style de Bringhurst es combinar fuentes del mismo diseñador (como Source Sans + Source Serif) o fuentes con altura x y contraste de trazo similares. Errores comunes: combinar dos fuentes que parecen similares pero no idénticas genera inconsistencia molesta, mientras que combinar fuentes de épocas históricas muy distintas (Garamond + Bebas) puede sentirse inconexo. Google Fonts publica una pestaña 'Pairings' por fuente que sugiere combinaciones validadas por la comunidad de diseño.

¿Cómo afecta la API de Google Fonts a la velocidad de la página?

Cada familia traída desde `fonts.googleapis.com/css2` añade una solicitud HTTP más la descarga del archivo WOFF2 (típicamente 15-40 KB por peso). El navegador no puede renderizar texto en esa fuente hasta que el archivo llegue, causando un Flash de Texto Invisible (FOIT) o Flash de Texto Sin Estilo (FOUT). Use `font-display: swap` en el CSS para mostrar texto de respaldo de inmediato y cambiar a la fuente personalizada al estar lista — ahora es el predeterminado de Google Fonts. Auto-alojar las fuentes con cabeceras Cache-Control adecuadas puede ser más rápido que la CDN porque evita una resolución DNS y conexión separadas. Precargue siempre las fuentes críticas con `<link rel="preload" href="..." as="font" crossorigin>`.

¿Qué es font-display y qué valor debo usar?

El descriptor CSS `font-display` (CSS Fonts Module Level 4) controla cómo se renderizan las fuentes durante la carga. Valores: `auto` (predeterminado del navegador, suele bloquear el render), `block` (3 segundos de texto invisible y luego cambio), `swap` (respaldo inmediato y cambio al cargar), `fallback` (100 ms invisibles, luego respaldo, cambio si la fuente llega en 3 s), `optional` (100 ms invisibles, luego respaldo, sin cambio). La documentación MDN recomienda `swap` para texto del cuerpo y `optional` para fuentes de iconos no esenciales. Google Fonts usa `swap` por defecto desde 2019 para mejorar las métricas Core Web Vitals — el cambio redujo la First Contentful Paint media unos 150 ms en la web.

¿Cuántas fuentes debería usar un sitio web?

El consenso de la industria es máximo dos o tres fuentes: una para encabezados, una para cuerpo de texto y opcionalmente una monospace para código o datos numéricos. Cada fuente adicional aumenta el peso de la página (15-100 KB), las solicitudes HTTP y la complejidad visual. Sistemas de diseño famosos coinciden: Material Design usa Roboto + Roboto Mono, Apple Human Interface usa SF Pro + SF Mono e IBM Carbon usa IBM Plex. Las fuentes variables (CSS Fonts Module Level 4 `font-variation-settings`) le permiten cargar un único archivo pero usar varios pesos y estilos, reduciendo drásticamente el peso total. Considere Inter, Recursive o Source Sans 3 — todas variables, todas con licencia libre.

¿Qué licencias usan Google Fonts?

Todas las fuentes de la biblioteca de Google Fonts están licenciadas bajo la SIL Open Font License 1.1 (OFL) o la Apache License 2.0, ambas permiten uso comercial y personal libre, modificación e incrustación en software. La OFL prohíbe específicamente vender la fuente en sí pero permite agruparla dentro de aplicaciones. Google Fonts almacena en caché los archivos de fuentes y el CSS bajo los mismos términos. Para auto-alojarlas, descárguelas de fonts.google.com (descarga zip) y sírvalas desde su propio dominio — necesario para cumplir GDPR en la UE porque usar fonts.googleapis.com transfiere las IP de los usuarios a Google.

¿Por qué GDPR y las leyes de cookies son un asunto con Google Fonts?

Usar `fonts.googleapis.com` hace que el navegador del usuario realice una solicitud HTTP a servidores de Google, transmitiendo la dirección IP — considerada dato personal según el GDPR Artículo 4. Un fallo del Tribunal Regional de Múnich en enero de 2022 (3 O 17493/20) determinó que incrustar Google Fonts sin consentimiento del usuario viola el GDPR, otorgando 100 € de daños. Auto-alojar elimina el riesgo legal por completo. Herramientas como `google-webfonts-helper` (gwfh.mranftl.com) generan el CSS y descargan los WOFF2 para auto-alojar. Verifique siempre la ley de privacidad de su jurisdicción y documente la base legal en su política de privacidad si sigue usando la CDN.

¿Puedo usar fuentes variables de Google Fonts?

Sí — Google Fonts aloja más de 200 fuentes variables incluyendo Inter, Recursive, Source Sans 3, Open Sans, Roboto Flex y Newsreader. Solicite una fuente variable con la sintaxis `:[email protected]` en la URL: `https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap`. El CSS usa `font-weight: 100` a 900 (o cualquier valor intermedio) sin descargas de archivos separadas — el archivo variable contiene todos los pesos interpolados. La compatibilidad de navegadores es excelente: Chrome 62+, Firefox 62+, Safari 11+. Algunas fuentes también exponen ejes de ancho (`wdth`), itálica (`ital`) y tamaño óptico (`opsz`) vía `font-variation-settings`.

¿Cuál es la diferencia entre Google Fonts y Adobe Fonts (antes Typekit)?

Google Fonts es gratis, de código abierto, alojado en la CDN de Google e incluye unas 1.500 familias. Adobe Fonts (antes Typekit) viene con suscripciones de Creative Cloud (20-60 USD/mes), aloja unas 25.000 familias incluyendo clásicos premium (Helvetica, Futura, Garamond) y permite sincronización al escritorio vía la app de Creative Cloud. Adobe Fonts tiene licencia más estricta (sin auto-alojamiento, debe incluir la etiqueta `<script>` de Adobe), mientras que Google Fonts permite auto-alojamiento completo bajo OFL. Para trabajo de diseño comercial que necesita tipografías premium gana Adobe; para fuentes web gratuitas, abiertas y rápidas, gana Google Fonts. Muchos sitios usan ambas.

¿Qué método de carga debo copiar de esta herramienta?

Use el conmutador Método de Carga según sus necesidades de rendimiento y privacidad. @import CDN es el más simple pero bloquea el render y envía la IP del visitante a Google (un asunto de GDPR). La opción Link + Preconnect emite `<link rel="preconnect">` para fonts.googleapis.com y fonts.gstatic.com más el `<link>` de la hoja de estilo y una pista comentada `<link rel="preload" as="font" crossorigin>` — es la elección amigable con Core Web Vitals. Auto-alojar @font-face genera un andamiaje seguro para GDPR con `font-display: swap` y rutas `/fonts/*.woff2`; descargue los WOFF2 reales de fonts.google.com o google-webfonts-helper (gwfh.mranftl.com) para que ninguna solicitud llegue a Google. Cada método importa los pesos 400 y 700 para que `<strong>` se renderice bien, y la opción de pesos variables cambia la solicitud a un único archivo `:[email protected]`.