Carga de fuentes web: font-display, preload y subsetting
Carga de fuentes web
Carga de fuentes web: font-display, preload, subsetting | We.Inc
Mira qué hace cada valor de font-display con un simulador de línea de tiempo y luego usa preload, preconnect, subconjuntos con unicode-range y métricas de respaldo ajustadas para evitar el layout shift.
Cargar fuentes rápido se reduce a cuatro pasos: avisar pronto al navegador de la fuente (preconnect o preload), enviar archivos WOFF2 pequeños que contengan solo los caracteres que necesitas, elegir un valor de font-display adecuado para el texto y dimensionar la fuente de respaldo para que coincida y nada salte. Usa font-display: optional cuando lo más importante sea evitar el layout shift.
Los valores de font-display de un vistazo
Valor
Texto mientras carga
Si la fuente llega tarde
Ideal para
Respaldo casi de inmediato
Siempre se cambia
Texto principal que debe verse al instante
Respaldo casi de inmediato
No se cambia; se queda el respaldo
El menor layout shift
Respaldo casi de inmediato
Se cambia solo si llega en unos 3s
Un término medio
Invisible hasta unos 3s
Siempre se cambia
Fuentes de iconos, logos compuestos con tipografía
Decide el navegador
Decide el navegador
Dejarlo en manos del navegador
Las fuentes son uno de los pocos recursos que pueden ocultar tu texto o desplazar la maquetación. Arrastra el control deslizante de abajo para fijar cuánto tarda en llegar una fuente y observa qué muestra cada valor de font-display en cada momento; después copia los patrones de carga que mantienen las páginas estables.
Ajusta el control deslizante al tiempo que tarda tu fuente en descargarse con una conexión lenta.
Lee cada fila: el gris es texto invisible, el ámbar es la fuente de respaldo y el azul es la fuente web.
Fíjate en qué valores cambian de fuente tarde. Un cambio tardío es cuando el texto visible se recoloca.
Copia los fragmentos para preload, subconjuntos con unicode-range y respaldos ajustados.
Fuentes alojadas por ti: incluye las reglas @font-face en línea dentro del head para que el navegador las encuentre sin esperar otra hoja de estilos.
Precarga solo uno o dos archivos críticos. Precargar todos los pesos compite con tus imágenes y scripts.
Añade siempre crossorigin a la precarga de una fuente, incluso para archivos de tu propio dominio, o el navegador descargará el archivo dos veces.
Sirve WOFF2. Comprime mejor que WOFF y todos los navegadores actuales lo leen.
Deja siempre una familia genérica razonable al final de cada lista de font-family, para que el texto se muestre aunque falle la descarga.
Preguntas frecuentes
¿Qué hace font-display: swap?
Da a la fuente un periodo de bloqueo extremadamente corto, que la especificación CSS Fonts recomienda mantener en 100ms o menos, y un periodo de intercambio infinito. El texto aparece casi al instante con la fuente de respaldo y cambia a la fuente web en cuanto esta termina de cargar.
¿Es font-display: swap malo para el CLS?
Puede serlo. Si la fuente de respaldo y la fuente web tienen anchos o alturas de línea distintos, el cambio tardío mueve el texto y el contenido que hay debajo. Corrígelo con size-adjust y los ajustes de ascent, descent y line-gap en el respaldo, o usa optional.
¿Por qué mi fuente precargada se descarga dos veces?
Las fuentes se piden en modo CORS anónimo, así que el enlace de precarga necesita el atributo crossorigin aunque el archivo esté en el mismo origen. Sin él, la precarga no coincide con la petición real y la fuente se descarga de nuevo.
¿Debo precargar Google Fonts?
Normalmente no. web.dev advierte de que precargar se salta parte de la negociación de contenido del propio navegador, incluido unicode-range, así que podrías descargar un subconjunto que la página nunca usa. En su lugar, usa preconnect a fonts.googleapis.com y fonts.gstatic.com, o aloja tú la fuente y precarga tu propio archivo.
¿Cómo ahorra bytes unicode-range?
Cuando una regla @font-face tiene un unicode-range, el navegador solo descarga ese archivo si la página usa al menos un carácter de ese rango. Divide una fuente en archivos latinos, cirílicos o griegos y cada visitante descargará solo los alfabetos que haya en la página.
La línea de tiempo de visualización de fuentes
Cuando un texto necesita una fuente que aún no ha llegado, el navegador pasa por hasta tres periodos. En el periodo de bloqueo maqueta el texto con un respaldo invisible. En el periodo de intercambio muestra el respaldo y cambia cuando llega la fuente. Después viene el periodo de fallo, en el que el respaldo se queda para siempre.
font-display solo cambia cuánto duran los dos primeros periodos. Las cifras del simulador son las que recomienda el borrador de CSS Fonts Level 4; los navegadores pueden usar tiempos ligeramente distintos.
Por qué los cambios tardíos provocan layout shift
Incluso el texto invisible ocupa un espacio medido con la fuente de respaldo. Cuando la fuente real la sustituye, cada línea puede ensancharse o estrecharse, así que los párrafos se recolocan y todo lo que hay debajo se mueve. Ese movimiento cuenta en el Cumulative Layout Shift.
Hay dos remedios. Evitar del todo el cambio tardío con optional, o hacer que el respaldo ocupe el mismo espacio que la fuente web usando size-adjust y los descriptores de ajuste de métricas en una cara de respaldo local().
Subsetting
Una fuente con miles de glifos es un desperdicio para una página que usa cien. Las herramientas de subsetting eliminan los caracteres no usados antes de subir el archivo, y unicode-range permite al navegador saltarse archivos enteros que no necesita.
Para un texto decorativo corto, la API de Google Fonts acepta un parámetro text= y devuelve un archivo con solo esos caracteres. Resulta práctico para un logo o un único título compuesto con una tipografía decorativa.
Fuente alojada por ti con preload
Precarga el único archivo que necesita la primera pantalla
as, type y crossorigin deben estar todos presentes. La regla @font-face va en línea dentro del head para que se descubra al instante.
Archivos divididos con unicode-range
Subconjuntos latino y cirílico de una misma familia
Ambas reglas comparten nombre de familia. Una página escrita solo en inglés nunca descarga el archivo cirílico.
Un respaldo dimensionado para coincidir
Respaldo local ajustado para reducir el layout shift
Los números son de ejemplo: mide tu propia fuente frente al respaldo y ajústalos hasta que ambas coincidan.
Google Fonts con preconnect y un subconjunto para un título
La segunda hoja de estilos pide solo las letras del texto del logo, lo que mantiene ese archivo diminuto.
Bloqueo extremadamente corto, sin periodo de intercambio
Simulador de la línea de tiempo de font-display
Vista inicial: la fuente tarda 1.5 segundos en cargar; arrastra el control deslizante para cambiarlo. El gris es texto invisible, el ámbar el respaldo y el azul la fuente web.
La fuente llega a los {n}s
La fuente web no se usa en esta visita
Cambio visible: el texto puede recolocarse
Sin cambio visible
Escala: de 0 a 5 segundos. Con optional, la especificación permite al navegador abortar una descarga tardía o terminarla con muy baja prioridad.