Estrategias Modernas de Carga de Fuentes para el Rendimiento Web

Las fuentes web pueden hacer que tu sitio tenga éxito o fracase en términos de rendimiento. Una estrategia de fuentes mal implementada lleva a texto invisible, cambios de diseño y usuarios frustrados. Sin embargo, la mayoría de los desarrolladores aún cargan fuentes como si fuera 2015—enviando archivos masivos, ignorando las características modernas de CSS y esperando lo mejor.

Este artículo cubre estrategias prácticas de carga de fuentes que puedes implementar hoy: aprovechar la compresión WOFF2, controlar la renderización con font-display, crear subconjuntos de fuentes de manera inteligente, usar pilas de fuentes del sistema como respaldo, precargar fuentes críticas y adoptar fuentes variables donde tengan sentido. Aprenderás cómo equilibrar el rendimiento con la tipografía mientras mejoras las Core Web Vitals.

Elige WOFF2 y Elimina los Formatos Heredados

Deja de enviar múltiples formatos de fuentes. WOFF2 ofrece un 30% mejor compresión que WOFF y tiene soporte universal de navegadores. A menos que estés dando soporte a IE11, WOFF2 es todo lo que necesitas.

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
}

Servir TTF, OTF o WOFF junto con WOFF2 desperdicia ancho de banda. Cada visitante paga un impuesto de rendimiento por navegadores que apenas existen. Convierte las fuentes existentes usando FontSquirrel o CloudConvert.

Controla la Renderización con font-display

El descriptor font-display determina cómo los navegadores manejan el espacio entre la solicitud de fuente y la renderización:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap; /* Mostrar respaldo inmediatamente */
}

Tus opciones:

• swap: Muestra el texto de respaldo inmediatamente, cambia cuando esté listo (previene FOIT)
• fallback: Período invisible breve (~100ms), luego respaldo
• optional: Usa la fuente solo si está disponible inmediatamente
• block: Oculta el texto hasta 3 segundos (evita esto)

Para texto del cuerpo, usa swap. Para fuentes decorativas, considera optional. Esta sola línea puede eliminar el problema del texto invisible.

Implementa Subconjuntos Inteligentes de Fuentes

La mayoría de los sitios envían conjuntos completos de caracteres que nunca usarán. Una fuente completa Latin Extended puede exceder los 100KB, pero tu sitio en español podría necesitar solo 30KB de glifos.

Usa unicode-range para dividir fuentes por escritura:

/* Latin */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}

/* Latin Extended */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF;
}

Herramientas como Glyphhanger analizan tu contenido y generan subconjuntos óptimos. Para Google Fonts, google-webfonts-helper proporciona archivos con subconjuntos predefinidos.

Diseña Pilas Robustas de Fuentes del Sistema

Las fuentes del sistema se cargan instantáneamente y proporcionan excelentes respaldos. Una pila bien diseñada asegura texto legible incluso si las fuentes personalizadas fallan:

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 
               'Segoe UI', Roboto, sans-serif;
}

Haz coincidir las métricas entre fuentes personalizadas y de respaldo usando descriptores CSS:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
  size-adjust: 100.5%; /* Coincidir métricas de respaldo */
  ascent-override: 95%;
  descent-override: 25%;
}

Usa Font Style Matcher para calcular estos valores y minimizar el cambio de diseño.

Precarga Fuentes Críticas

La precarga le dice a los navegadores que obtengan fuentes inmediatamente, antes de descubrirlas en CSS:

<link rel="preload" href="/fonts/inter-latin.woff2" 
      as="font" type="font/woff2" crossorigin>

Consideraciones clave:

• Solo precarga fuentes above-the-fold
• Incluye el atributo crossorigin (requerido para fuentes)
• Coincide con la URL exacta de tu declaración @font-face
• Evita precargar cada subconjunto—derrota el propósito de crear subconjuntos

Combina con CSS crítico en línea para máximo impacto:

<style>
  @font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-latin.woff2') format('woff2');
    font-display: swap;
  }
</style>

Considera las Fuentes Variables Estratégicamente

Las fuentes variables pueden reemplazar múltiples archivos con uno, pero no siempre son más pequeñas. Una fuente variable que soporta pesos 100-900 podría ser 50KB, mientras que dos pesos estáticos totalizan 30KB.

@font-face {
  font-family: 'Inter Variable';
  src: url('/fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

/* Usar cualquier peso en el rango */
h1 { font-weight: 750; }
p  { font-weight: 425; }

Las fuentes variables sobresalen cuando necesitas:

• Múltiples pesos o anchos
• Animaciones suaves entre pesos
• Tipografía responsive que escala con el viewport

Para sitios simples usando 2-3 pesos, las fuentes estáticas a menudo funcionan mejor.

Impacto en las Core Web Vitals

La carga adecuada de fuentes mejora directamente las métricas clave:

Largest Contentful Paint (LCP): La precarga y font-display: swap aseguran que el texto se renderice rápidamente, previniendo retrasos en la medición de LCP.

Cumulative Layout Shift (CLS): Hacer coincidir las métricas de fuentes y usar size-adjust elimina los reflujos de texto molestos cuando las fuentes se cargan.

First Input Delay (FID): Reducir la carga útil de fuentes y evitar comportamientos que bloqueen la renderización mantiene el hilo principal responsivo.

Conclusión

La carga moderna de fuentes no se trata de elegir una estrategia perfecta—se trata de combinar técnicas que funcionen para tus necesidades específicas. Comienza con WOFF2 y font-display: swap. Agrega subconjuntos y precarga para fuentes críticas. Usa pilas de fuentes del sistema como respaldos sólidos. Considera fuentes variables solo cuando proporcionen beneficios claros.

Lo más importante, mide el impacto. Usa WebPageTest o Lighthouse para verificar que tu estrategia de fuentes mejore las métricas de rendimiento reales. La tipografía hermosa no debería venir a costa de la experiencia del usuario.

Preguntas Frecuentes

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.