Como reduzir CLS causado pela troca de fonte

Fontes com métricas diferentes podem deslocar blocos e alterar quebras de linha.

Antes de começar

Use trace com cache frio e observe se texto ou elementos adjacentes mudam de posição.

Passo a passo

1. Otimize carregamento da fonte crítica e escolha fallback com métricas mais próximas.

2. Repita Lighthouse e confirme com dados de campo quando houver tráfego suficiente.

Limites e cuidados

Não avalie estabilidade só numa captura estática ou cache aquecido.

Continue na biblioteca

Fonte oficial: Otimizar carregamento e renderização de fontes — web.dev.

Conteúdo da biblioteca de Diego Henrich. Confira as fontes citadas e valide orientações que dependem da versão de uma plataforma ou serviço.