Tipografías y carga de fonts

Cómo cambiar la familia tipográfica y optimizar la carga de Google Fonts o Adobe Fonts.

Actualizado el min de lectura

Variables tipográficas

Cada theme define --font-sans (cuerpo) y --font-display (titulares). Cámbialas para cambiar la tipografía del sitio.

Adobe Fonts (Typekit)

El layout ya hace preconnect a use.typekit.net. Agrega tu kit en el head a través de un partial. Optimiza usando font-display: swap.

Google Fonts

Usa el método self-hosted (descarga con google-webfonts-helper) en lugar de CDN. Reduce render-blocking y mejora LCP.

Subsets

Carga solo los subsets que necesitas (latin, latin-ext si tienes acentos especiales). Reduce el peso hasta 70%.

Variable fonts

Si tu tipografía tiene versión variable, úsala. Un solo archivo cubre todos los pesos y reduce requests.

¿Te fue útil este artículo?

✓ ¡Gracias por tu feedback!

Lamentamos que no haya sido lo que buscabas. ¿Quieres contactarnos directamente?

Contactar soporte

¿Aún necesitas ayuda?

Si no encontraste lo que buscabas, contáctanos y te ayudaremos lo antes posible.

Contactar soporte