Las fuentes web mal configuradas son una de las causas más frecuentes de LCP lento y CLS alto: el navegador bloquea el texto mientras descarga el archivo de tipografía, y cuando la fuente llega, el texto cambia de tamaño y desplaza el layout. Ambos problemas se resuelven con tres ajustes específicos en tu CSS y HTML.
Esta guía cubre exactamente qué hacer: formato correcto (WOFF2), la directiva font-display, precargar la fuente crítica y reducir el peso con subconjuntos.
Por qué las fuentes web dañan LCP y CLS
Google mide el rendimiento de tu página con los Core Web Vitals. Las fuentes afectan dos de ellos directamente:
- LCP (Largest Contentful Paint): si el elemento más grande de la pantalla es un bloque de texto con una fuente externa, el LCP no se dispara hasta que esa fuente termina de cargarse.
- CLS (Cumulative Layout Shift): cuando el navegador muestra primero una fuente de respaldo y luego la sustituye por la fuente real, el texto puede aumentar o reducir su altura y empujar otros elementos. Eso suma al CLS.
El impacto es real: un archivo de fuente de 150 KB puede añadir 400–800 ms al LCP en conexiones móviles. Un salto tipográfico mal gestionado puede disparar el CLS por encima del umbral "Poor" (0.25) de Google.
Paso 1 — Usa siempre WOFF2
WOFF2 ofrece una compresión entre un 30 % y un 50 % mejor que WOFF y es compatible con todos los navegadores modernos (Chrome 36+, Firefox 39+, Safari 12+). Si todavía sirves TTF, OTF o WOFF antiguo, estás enviando kilobytes innecesarios.
En tu @font-face, declara solo WOFF2 con un fallback a WOFF para navegadores muy antiguos:
@font-face {
font-family: 'MiFuente';
src: url('/fonts/mi-fuente.woff2') format('woff2'),
url('/fonts/mi-fuente.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}Si usas Google Fonts, añade &display=swap a la URL y asegúrate de pedir solo las variantes de peso que realmente utilizas:
https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swapPaso 2 — Configura font-display correctamente
La propiedad font-display controla qué ve el usuario mientras la fuente se descarga. Es el ajuste más importante para LCP y CLS:
| Valor | Comportamiento | Impacto en LCP/CLS |
|---|---|---|
auto | El navegador decide (generalmente bloquea) | Daña LCP |
block | Texto invisible hasta que carga la fuente | Daña LCP notablemente |
swap | Fallback inmediato, luego swap cuando carga | Mejora LCP; puede dañar CLS |
fallback | 100 ms de espera, luego fallback, swap si carga rápido | Buen equilibrio |
optional | Breve espera; si no carga, usa fallback definitivo | Mejor para CLS; sacrifica tipografía |
Para la mayoría de sitios: usa font-display: swap combinado con métricas de ajuste de fuente (ver paso 4) para controlar el CLS.
Para fuentes secundarias o decorativas que no forman parte del elemento LCP: usa font-display: optional. Si la fuente no llega en tiempo, el navegador no la aplica en esa visita y evita el salto de layout.
Paso 3 — Precarga la fuente crítica con <link rel="preload">
Si tu fuente es parte del elemento LCP (un titular o párrafo grande), dile al navegador que la descargue lo antes posible añadiendo esta línea en el <head> de tu HTML, antes de los estilos:
<link rel="preload"
href="/fonts/mi-fuente-regular.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous">Puntos clave:
- Precarga solo 1 o 2 archivos como máximo. Precargar cada variante de peso satura la conexión y empeora el rendimiento global.
- El atributo
crossorigin="anonymous"es obligatorio para archivos de fuente, aunque estén en el mismo dominio. - Si usas Google Fonts o cualquier CDN externo, el preload solo funciona si también añades
<link rel="preconnect">al dominio de origen.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>Paso 4 — Elimina el CLS con métricas de ajuste de fuente
Con font-display: swap, el navegador muestra primero la fuente de respaldo (Arial, Georgia…) y luego hace el intercambio. Si las métricas de ambas fuentes difieren, el texto se mueve: CLS.
CSS ahora ofrece propiedades para ajustar las métricas de la fuente de respaldo para que coincidan visualmente con la fuente real:
@font-face {
font-family: 'MiFuente-Fallback';
src: local('Arial');
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
size-adjust: 107%;
}
body {
font-family: 'MiFuente', 'MiFuente-Fallback', Arial, sans-serif;
}Los valores exactos dependen de cada par de fuentes. Herramientas como Font Style Matcher (meowni.ca) o el CLI de Fontaine te calculan los porcentajes automáticamente. Esta técnica puede llevar el CLS de las fuentes prácticamente a cero.
Para profundizar en más estrategias de rendimiento puedes revisar los artículos de la categoría rendimiento, donde encontrarás guías sobre imágenes, caché y Core Web Vitals. Si prefieres delegar la optimización, elenlace.com ofrece auditorías completas de Core Web Vitals con implementación incluida.
Paso 5 — Reduce el peso con subconjuntos (subsetting)
Una fuente completa puede incluir soporte para cirílico, griego, vietnamita y decenas de caracteres que nunca usarás si tu sitio es en español. El subsetting elimina esos glifos innecesarios.
Con Google Fonts, solicita solo el subconjunto latino:
https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap&subset=latinSi alojas las fuentes tú mismo, usa la herramienta pyftsubset de fonttools:
pyftsubset mi-fuente.ttf \
--unicodes="U+0020-007F,U+00C0-00FF,U+00A1,U+00BF" \
--output-file="mi-fuente-latin.ttf" \
--flavor=woff2El rango cubre ASCII estándar más caracteres latinos extendidos necesarios para el español (ñ, acentos, ¡, ¿). El resultado típico es un archivo un 60-80 % más pequeño que la fuente completa.
Conclusiones clave
- Usa exclusivamente WOFF2; elimina TTF, OTF y WOFF antiguo de tu stack.
font-display: swapmejora el LCP al mostrar texto de inmediato con la fuente de respaldo.- Precarga solo la fuente del elemento LCP con
<link rel="preload">en el<head>. - Las propiedades CSS
ascent-override,descent-overrideysize-adjustalinean la fuente de respaldo con la real y eliminan el CLS. - El subsetting reduce el peso del archivo un 60-80 % al eliminar glifos que nunca usas.
¿Quieres implementar estas mejoras pero no tienes tiempo? Contáctanos en elenlace.com — nos encargamos de la optimización completa de fuentes y Core Web Vitals para que tú te concentres en tu negocio.
Preguntas frecuentes
¿Es mejor alojar las fuentes en mi propio servidor o usar Google Fonts?
En general, alojarlas tú mismo es más rápido porque evitas la conexión a un dominio externo y tienes control total sobre los encabezados de caché. Además, desde 2022 Chrome ya no comparte la caché de Google Fonts entre sitios, eliminando esa ventaja histórica. La excepción: si tu servidor es lento, Google Fonts puede ser más rápido gracias a su CDN global.
¿Cuántas fuentes puedo usar sin penalizar el rendimiento?
La regla práctica es un máximo de 2 familias tipográficas y 2-3 pesos por familia. Cada archivo de fuente es una petición HTTP adicional. Con WOFF2 y subconjuntos, una fuente bien optimizada puede pesar menos de 20 KB; cuatro variantes de una sola familia mal configurada pueden superar los 400 KB.
¿El preload de fuentes funciona en todos los navegadores?
<link rel="preload"> es compatible con Chrome, Edge, Firefox y Safari modernos (cubre más del 95 % de usuarios). En navegadores que no lo soportan, simplemente se ignora sin causar errores — nunca bloquea la carga.
¿Cómo sé si mis fuentes están causando CLS?
Abre Chrome DevTools → pestaña Performance → activa "Web Vitals" y graba una carga de página. Los eventos de CLS aparecen marcados en línea de tiempo. También puedes usar PageSpeed Insights o el informe Core Web Vitals de Google Search Console para identificar páginas con CLS elevado causado por texto.
Compara proveedores
Otros proveedores y guías que vale la pena comparar:
