Como você carrega web fonts sem causar layout shift nem esconder o texto?

Hospede a fonte você mesmo, faça preload do único arquivo necessário para o primeiro paint e use font display swap para o texto ficar visível de imediato. Depois elimine o deslocamento casando as métricas da fonte de fallback com size adjust, ascent override e descent override, ou usando uma face de fallback gerada. Faça subset da fonte para os caracteres que você realmente usa, entregue só woff2 e evite carregar vários pesos quando fontes variáveis cobrem a faixa.

O deslocamento acontece porque a fonte de fallback tem métricas diferentes, então quando a fonte real chega toda linha refluia e tudo abaixo dela se move. Então há dois problemas a resolver: quando o texto aparece e quanto ele se move ao mudar. Para o primeiro, hospedo a fonte, faço preload só do arquivo necessário para a visão inicial e uso font display swap para ninguém ficar encarando um bloco de texto em branco numa conexão lenta. Para o segundo, sobrescrevo as métricas do fallback, size adjust mais overrides de ascent e descent numa face de fallback local, então o fallback ocupa quase exatamente o mesmo espaço e a troca mal se percebe. Além disso é higiene: só woff2, subset para o conjunto de caracteres realmente usado e uma fonte variável em vez de quatro pesos estáticos. Num site que puxava três pesos de uma origem de terceiro, migrar para uma fonte variável auto hospedada com subset cortou uns 180 kilobytes e levou o CLS de cerca de 0.18 para menos de 0.02.