Las fuentes web pueden causar FOIT (Flash of Invisible Text) o FOUT (Flash of Unstyled Text). Optimizar su carga mejora LCP y la experiencia de lectura.

font-display

font-display: swap: muestra texto con fuente del sistema mientras carga. font-display: optional: no descarga si la red es lenta. font-display: block: período de bloqueo corto.

Subset de fuentes

Incluye solo los caracteres necesarios (latino básico, no todos los glifos). Herramientas: glyphhanger, fonttools. Reduce drásticamente el tamaño de archivos.

Precarga

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Asegura que el navegador descargue la fuente temprano, antes de que CSS la descubra.

Formatos

WOFF2 es el estándar moderno (compresión 30-50% mejor que WOFF). Proporciona solo WOFF2 y deja que navegadores antiguos usen fuentes del sistema.