El ensayo anterior de esta serie sostenía que muchas aplicaciones no deberían servir fuente alguna. Este es para las superficies donde la tipografía sí se gana sus bytes — porque "merece la pena cargarla" es donde empieza la ingeniería, no donde termina. Una fuente web es una dependencia que bloquea el renderizado del contenido más importante de la página. Presupuéstala como tal.
Un archivo, todos los pesos
La decisión de mayor apalancamiento es la arquitectura de archivos. Una familia tradicional se sirve como instancias estáticas — redonda, cursiva, negrita, quizá un corte de titulares — cada una su propia petición, fácilmente 300–400 KB en conjunto. Una fuente variable transporta el mismo rango (a menudo más: todos los pesos del 100 al 900) en un archivo que suele pesar menos que dos estáticos.
Menos archivos también significa menos oportunidades de carga parcial — sin ese destello de cursiva-real-con-negrita-falsa mientras el archivo de la negrita se rezaga. Y los ejes adicionales del archivo variable son funcionales: tamaño óptico para el texto pequeño, grado para los temas oscuros — capacidades, no lastre.
Subconjuntos en serio
La mayoría de los archivos de fuente son, en su mayor parte, caracteres que tu interfaz nunca renderizará. El subsetting — recortar el archivo a las escrituras y caracteres que realmente usas — reduce a la mitad, de forma rutinaria, una fuente latina, y unicode-range te permite conservar una cobertura más amplia sin pagarla por adelantado: declara el subconjunto latino y el subconjunto extendido como faces separadas, y el navegador descarga la extensión solo cuando aparece un carácter que coincide. Herramientas como pyftsubset/fonttools convierten esto en un paso de compilación, no en un proyecto de artesanía. WOFF2 se da por sentado; si estás sirviendo cualquier otra cosa en 2026, empieza por ahí.
font-display, elegido con honestidad
El comportamiento de carga es una decisión de producto disfrazada de CSS:
blockoculta el texto mientras la fuente carga. Casi nunca es defendible — estás cambiando el tiempo de tus lectores por la vanidad de tu marca.swapmuestra el respaldo de inmediato y cambia cuando llega la fuente. Correcto para superficies de lectura — pero convierte el momento del cambio en tu problema, que es la siguiente sección.optionalusa la fuente solo si ya está en caché (aproximadamente: al instante o nunca). Para aplicaciones de alto rendimiento que insisten en una fuente web, este es el ajuste honesto — la primera visita se lee en el respaldo, todas las posteriores reciben la fuente de marca, y nada se desplaza jamás.
Ingeniería del cambio hasta la invisibilidad
Si eliges swap, el desplazamiento de la maquetación es tuyo y te toca eliminarlo. El conjunto de herramientas moderno lo hace casi a la perfección: una @font-face de respaldo construida sobre una fuente local del sistema con size-adjust, ascent-override y descent-override afinados para que el respaldo ocupe el mismo espacio que la fuente web. El texto se renderiza al instante en el respaldo ajustado; la fuente web llega; nada se mueve. Este sitio hace exactamente esto — el respaldo en Georgia de la fuente de titulares está escalado métricamente para que el cambio sea un cambio de voz, no un cambio de maquetación.
Remata con higiene de entrega: aloja tú mismo las fuentes (un CDN de fuentes de terceros es una cuestión de privacidad y el establecimiento de una conexión que no necesitas), haz preload del único archivo crítico y configura cabeceras de caché inmutables para que el coste se pague una vez por usuario, para siempre.
El presupuesto completo de una fuente de texto seria, hecha así: un WOFF2 variable precargado, en subconjunto para tus idiomas, de unos 40–90 KB, con swap y un respaldo métricamente compatible o directamente optional. Eso es más barato que la mayoría de las imágenes de portada — que era el estándar que la tipografía tenía que cumplir desde el principio.