Estratégias de exibição controlam o comportamento do texto durante o carregamento de uma webfont.
Antes de começar
Compare a fonte final com uma alternativa local de métricas próximas.
Passo a passo
- Ajuste
font-displaye, se necessário, propriedades de ajuste de fallback.
As opções mais usadas expressam compromissos diferentes:
| Valor | Comportamento prático |
|---|---|
swap | Mostra logo o fallback e troca pela webfont quando chegar; texto fica visível, mas a troca pode alterar quebras de linha. |
fallback | Permite breve período de bloqueio e uma janela limitada para troca; se a fonte chega tarde, mantém fallback. |
optional | Dá ao navegador liberdade para ficar no fallback se a webfont não chegar cedo; evita uma troca tardia, mas a fonte pode não aparecer naquela visita. |
block | Pode manter texto invisível por um período enquanto espera a fonte; use com cautela em texto essencial. |
auto | Deixa a escolha ao comportamento do navegador. |
Exemplo: @font-face { font-family: "Marca"; src: url("/fonts/marca.woff2") format("woff2"); font-display: swap; }. Escolha um fallback de métricas próximas e considere size-adjust, ascent-override e descent-override após medir a diferença, não como valores copiados sem teste.
- Teste cache frio e quente, largura de títulos e CLS em dispositivos pequenos.
Limites e cuidados
Uma troca de fonte pode alterar quebras de linha; valide a página inteira, não só o primeiro parágrafo. Em rede lenta/cache frio, confirme que o texto aparece imediatamente para a estratégia escolhida e compare CLS e largura de títulos. swap prioriza leitura contínua, não elimina por si só deslocamento; ajuste o fallback ou use optional se a troca tardia for mais prejudicial. Consulte web.dev sobre carregamento de fontes.
Continue na biblioteca
Fonte oficial: Otimizar carregamento e renderização de fontes — web.dev.