La cadena de carga de una fuente, del CSS al primer glifo

Una fuente es el recurso con el descubrimiento más tardío de toda la página. No está en el HTML, así que el escáner de precarga no la ve; está en el CSS, pero declararla no la pide; se pide solo cuando el navegador ha construido el árbol de renderizado y ha comprobado que hay texto real que la necesita. Esa cadena de dependencias explica por qué el texto tarda tanto en aparecer con su forma definitiva, y entenderla eslabón a eslabón es lo que permite decidir cuál cortar.

Los ocho pasos

flowchart TB
A[El navegador recibe el HTML] --> B[Encuentra el enlace a la hoja de estilos]
B --> C[Descarga la hoja y construye el CSSOM]
C --> D[Registra las reglas font-face sin pedir ningun fichero]
D --> E[Construye el arbol de renderizado]
E --> F[Un nodo de texto necesita una familia concreta]
F --> G[Emparejamiento por familia peso estilo y unicode-range]
G --> H[Ahora si peticion del fichero de fuente]
H --> I[Descarga y descompresion del WOFF2]
I --> J[Saneado y validacion de las tablas]
J --> K[Modelado del texto y rasterizado de glifos]
K --> L[Primer glifo pintado con la fuente real]
style C fill:#89b4fa,color:#11111b
style D fill:#cba6f7,color:#11111b
style F fill:#cba6f7,color:#11111b
style H fill:#f9e2af,color:#11111b
style I fill:#f9e2af,color:#11111b
style L fill:#a6e3a1,color:#11111b

Los dos nodos morados son los que sorprenden a todo el mundo, y merecen su propia explicación.

Registrar no es descargar. Cuando el navegador parsea una regla @font-face, lo único que hace es anotar en una tabla que existe una cara de fuente con ese nombre, ese peso, ese estilo, ese rango de caracteres y esa URL. No emite ninguna petición. La razón de diseño es evidente en cuanto se piensa: una hoja de estilos de un sistema de diseño puede declarar cuarenta caras, y una página concreta usa dos. Descargarlas todas al parsear el CSS sería absurdo.

La petición nace del uso. El disparador es que un elemento del árbol de renderizado, con texto real dentro, resuelva su font-family a esa cara. Eso significa que si tienes una regla para una familia que ninguna regla aplica a ningún elemento, el fichero no se descarga jamás. Y significa también algo menos cómodo: la petición no puede empezar hasta que el árbol de renderizado existe, y el árbol de renderizado no existe hasta que el CSS entero está descargado y parseado, porque el CSS bloquea el renderizado.

De ahí sale la propiedad más importante de la cadena: entre el primer byte del HTML y la petición de la fuente hay como mínimo un viaje completo de ida y vuelta adicional, el de la hoja de estilos. Con el CSS en un fichero externo del mismo origen, eso es un viaje. Con el CSS que a su vez importa otra hoja, dos. Con la fuente en un origen distinto, hay que sumar además la resolución de nombres, la conexión y el apretón de manos de cifrado con ese origen.

El emparejamiento, que es más selectivo de lo que parece

Cuando un nodo necesita una familia, el navegador aplica el algoritmo de emparejamiento de fuentes, y lo hace en un orden concreto que tiene consecuencias prácticas:

Primero la familia. Se recorre la lista de font-family de izquierda a derecha.

Después el rango de caracteres. Dentro de una familia, solo se consideran las caras cuyo unicode-range contenga alguno de los caracteres que hay que pintar. Una cara cuyo rango no toca ningún carácter de la página no se descarga nunca, y ese es todo el mecanismo de los subconjuntos.

Después el estirado, el estilo y el peso, en ese orden y con reglas de aproximación bien definidas cuando no hay coincidencia exacta.

La consecuencia práctica más útil: el número de ficheros que se descargan no depende de cuántas caras declares, sino de cuántas combinaciones distintas de familia, rango y peso aparecen efectivamente en el texto renderizado. Un párrafo en cursiva negrita perdido en el pie de página descarga un fichero entero.

Cuánto cuesta cada eslabón

Las cifras que siguen son de una conexión móvil de tipo 4G con unos 100 milisegundos de ida y vuelta, que es un escenario intermedio razonable. En una conexión lenta de verdad hay que multiplicar por tres o cuatro.

Dos lecturas de la tabla.

La primera: todo el coste está en la red. La suma de descompresión, validación y rasterizado no llega a 30 milisegundos ni en el peor caso. Optimizar el fichero para que se parsee más rápido no existe como problema; optimizarlo para que pese menos y llegue antes, sí.

La segunda: la cadena es serial. Los eslabones no se solapan, porque cada uno depende del anterior. Sumados dan entre 450 y 1.100 milisegundos hasta el primer glifo con la fuente real, en el caso bueno de origen propio, y entre 650 y 1.600 si la fuente vive en otro dominio. Esa es la ventana durante la cual tu texto se ve con otra tipografía o no se ve en absoluto.

La medición en tu propio sitio no necesita ninguna herramienta:

const fuentes = performance.getEntriesByType('resource')
  .filter((r) => /\.(woff2?|ttf|otf)(\?|$)/.test(r.name))
  .map((r) => ({
    fichero: r.name.split('/').pop().slice(0, 32),
    inicio: Math.round(r.startTime),
    espera: Math.round(r.responseStart - r.startTime),
    descarga: Math.round(r.responseEnd - r.responseStart),
    kb: Math.round(r.encodedBodySize / 1024),
  }));

console.table(fuentes);
console.log('primer glifo listo hacia', Math.round(Math.max(...fuentes.map((f) => f.inicio + f.espera + f.descarga))), 'ms');

La columna inicio es la que responde la pregunta que importa: cuándo empezó la petición. Si sale por encima de los 400 o 500 milisegundos, la cadena está intacta y hay margen para cortarla. Si sale cerca de los 100, alguien ya la ha cortado.

<link rel="preconnect" href="https://origen-de-la-hoja.example">
<link rel="preconnect" href="https://origen-de-los-ficheros.example" crossorigin>

Los tres cortes

De la estructura de la cadena salen exactamente tres intervenciones, y las tres atacan un eslabón distinto.

Cortar la espera del CSS: precargar. Una directiva de precarga en el HTML la ve el escáner de precarga mientras parsea, es decir, antes de que exista el CSSOM. La petición de la fuente arranca en paralelo con la del CSS en lugar de después. Ahorra el viaje completo de la hoja de estilos, que en móvil son de 150 a 350 milisegundos.

Cortar la conexión extra: autoalojar. Sirve la fuente desde tu propio origen y desaparecen la resolución de nombres, la conexión y el cifrado del origen ajeno, además de la hoja bloqueante intermedia.

Cortar la descarga: reducir el fichero. Un subconjunto latino de 20 KB tarda la mitad que una fuente completa de 60. Y hay un caso extremo que merece conocerse: para textos muy cortos y conocidos, como un logotipo tipográfico o un titular fijo, un subconjunto de los caracteres exactos puede bajar de 4 KB, que en la práctica es un solo paquete.

Ninguna de las tres cambia lo que ocurre mientras la fuente no está: eso es responsabilidad de font-display, y es lo siguiente.