Como Corrigir o Layout Shift de Fontes
Se seu texto pula ou muda ao carregar a página, sua webfont provavelmente está substituindo uma fonte de fallback de tamanho diferente. Você pode reduzir bastante esse salto com algumas linhas de CSS.
O que está acontecendo?
Existem dois efeitos comuns. No flash de texto invisível (FOIT), o texto fica em branco até a fonte chegar. No flash de texto sem estilo (FOUT), uma fallback aparece primeiro e depois é trocada. Se as duas fontes tiverem tamanhos diferentes, as linhas quebram de novo e o conteúdo se move. Esse movimento conta para o Cumulative Layout Shift (CLS), uma das Core Web Vitals do Google.
Escolha um valor para font-display
- swap mostra o texto na hora e troca quando a fonte estiver pronta. É a escolha mais comum, mas pode causar um salto.
- optional usa sua fonte apenas se ela chegar muito rápido. Assim evita uma troca tardia, o que combina com texto de corpo em sites focados em velocidade.
- fallback fica entre os dois, com uma espera curta e um tempo limitado para trocar.
Combine sua fonte de fallback
Esta é a correção mais eficaz. Você cria uma fallback que usa uma fonte do sistema, redimensionada para ocupar aproximadamente o mesmo espaço da sua webfont. Quando a troca acontece, quase nada se move:
@font-face {
font-family: "Brand Sans Fallback";
src: local("Arial");
size-adjust: 104%;
ascent-override: 96%;
descent-override: 28%;
line-gap-override: 0%;
}
body {
font-family: "Brand Sans", "Brand Sans Fallback", sans-serif;
}Você não precisa calcular esses números sozinho. No Webfont Generator, abra CSS, escolha uma Matched fallback font, e a ferramenta mede sua fonte e escreve a regra.
Outras coisas que ajudam
- Faça preload da fonte principal, para que ela chegue antes da primeira renderização sempre que possível.
- Mantenha os arquivos de fonte pequenos, como explicamos no nosso guia sobre webfonts mais rápidas.
- Evite fontes de origens misturadas. Servir as fontes do seu próprio domínio elimina uma conexão extra.
Verifique sua pontuação
Execute o Page Speed Test e observe o CLS. Uma pontuação boa é 0,1 ou menos. Para ver a troca por conta própria, limite a velocidade da sua conexão nas ferramentas de desenvolvedor do navegador e recarregue a página.
