¿Cómo cargas fuentes web sin provocar desplazamiento de layout ni ocultar el texto?

Aloja la fuente tú mismo, precarga el único archivo necesario para el primer pintado y usa font display swap para que el texto sea visible de inmediato. Luego elimina el desplazamiento haciendo coincidir las métricas de la fuente de respaldo con size adjust, ascent override y descent override, o usando una fuente de respaldo generada. Reduce la fuente al subconjunto de caracteres que de verdad usas, entrega solo woff2 y evita cargar varios pesos cuando una fuente variable cubre el rango.

El desplazamiento ocurre porque la fuente de respaldo tiene métricas distintas, así que cuando llega la fuente real cada línea se recompone y todo lo que hay debajo se mueve. Así que hay dos problemas que arreglar: cuándo aparece el texto y cuánto se mueve cuando cambia. Para lo primero, alojo la fuente yo mismo, precargo solo el archivo necesario para la vista inicial y uso font display swap para que nadie se quede mirando un bloque de texto en blanco con una conexión lenta. Para lo segundo, sobrescribo las métricas de la fuente de respaldo, size adjust más ascent y descent override sobre una fuente local de respaldo, para que ocupe casi exactamente el mismo espacio y el cambio apenas se note. Más allá de eso es higiene: solo woff2, subconjunto del conjunto de caracteres realmente usado y una fuente variable en lugar de cuatro pesos estáticos. En un sitio que traía tres pesos desde un origen de terceros, pasar a una fuente variable propia y con subconjunto quitó unos 180 kilobytes y llevó el CLS de aproximadamente 0,18 a menos de 0,02.