Carga de fuentes web: font-display, preload, subconjuntos con unicode-range y alternativas ajustadas por métricas

Objetivo

El texto es visible en el primer renderizado, la fuente de marca llega sin mover líneas, y una página en un solo sistema de escritura descarga solo los glifos que usa.

Requisitos previos

Archivos de fuente WOFF2 bajo una licencia que permita crear subconjuntos, una herramienta de subconjuntos (por ejemplo pyftsubset de fontTools) y control sobre las cabeceras de respuesta en el servidor que sirve las fuentes.

Pasos

1. Dividir cada tipografía en subconjuntos por sistema de escritura (latino, latino extendido, cirílico, griego, …) y declarar cada uno con su propio @font-face y unicode-range. MDN indica que, si la página no usa ningún carácter de un rango, la fuente no se descarga, y si usa al menos uno, se descarga el archivo completo.
2. Elegir font-display según el papel, con las definiciones de MDN: swap da un período de bloqueo extremadamente corto y un período de intercambio infinito (la alternativa se muestra de inmediato y se intercambia en cuanto llega la fuente); fallback da un período de intercambio corto; optional no da ningún período de intercambio. Usar optional para el cuerpo del texto, donde un intercambio tardío cuesta más que una fuente ausente, y swap para los títulos y los logotipos.
3. Precargar solo los archivos necesarios para el primer renderizado: <link rel="preload" as="font" type="font/woff2" href="…" crossorigin>. MDN señala que la precarga de fuentes requiere el atributo crossorigin incluso para archivos del mismo origen, porque las fuentes se obtienen en modo CORS.
4. Declarar una fuente alternativa ajustada por métricas: un segundo @font-face con src: local("Arial") (u otra tipografía presente en la plataforma) y size-adjust, ascent-override, descent-override y line-gap-override ajustados hasta que un párrafo salte de línea en los mismos puntos con ambas tipografías. Listarla después de la fuente web en font-family.
5. Servir los archivos de fuente con un Cache-Control: max-age largo más immutable, y con cabeceras CORS si residen en otro origen.
6. Comprobar con un perfil de red limitado: sin texto invisible, sin salto de línea en el intercambio y un número reducido de solicitudes de fuente por página. Reducir los subconjuntos o pasar más texto a optional si algo falla.

Resultado esperado

El primer renderizado muestra texto en la alternativa o en la fuente web cacheada, el intercambio (si lo hay) apenas mueve líneas, y una página solo en latino descarga uno o dos archivos pequeños en lugar de la familia completa.

Límites y base de verificación

La semántica de bloqueo e intercambio sigue las definiciones de MDN citadas; las duraciones exactas dependen del navegador y no se afirman aquí. Las pilas de fuentes del sistema (font-family: system-ui) evitan la carga por completo, y las fuentes variables sustituyen varios archivos estáticos por uno; ninguna de las dos se compara aquí. No se reportan mediciones.