Garantir que o texto permaneça visível durante o carregamento da webfont

As fontes geralmente são arquivos grandes com tempos de carregamento lentos. Alguns navegadores ocultam o texto até que a fonte seja carregada, causando um flash de texto invisível (FOIT, na sigla em inglês).

Como a auditoria de exibição de fontes do Lighthouse falha

O Lighthouse sinaliza todos os URLs de fontes que podem exibir texto invisível:

Uma captura de tela da auditoria do Lighthouse "Garantir que o texto continue visível durante o carregamento da webfont"

Como evitar a exibição de texto invisível

A API font-display indica como uma fonte é exibida quando usada em um estilo font-face. Os valores de font-display a seguir vão informar ao navegador para usar uma fonte do sistema se a fonte personalizada não estiver pronta:

  • swap
  • optional
  • fallback

Exemplo de CSS

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

Exemplo do Google Fonts

Adicione o parâmetro &display=swap/&display=optional/&display=fallback ao final do URL das fontes do Google:

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

Como evitar mudanças de layout causadas por fontes adiadas

Mostrar temporariamente uma fonte do sistema vai substituir um FOIT por um flash de texto sem estilo (FOUT, na sigla em inglês). Isso melhora o FCP&LCP renderizando o conteúdo mais cedo, mas o FOIT e o FOUT terão o mesmo impacto no CLS quando a fonte personalizada substituir a fonte temporária do sistema.

O impacto do carregamento de fontes no CLS pode ser atenuado usando carregamentos prévios em conjunto com font-display: optional. No entanto, o uso excessivo de carregamentos prévios pode afetar negativamente as métricas de carregamento. Recomendamos realizar testes A/B para garantir que o pré-carregamento de fontes não apresente regressões de desempenho.

Orientações específicas para a pilha

Drupal

Especifique @font-display ao definir fontes personalizadas no seu tema.

Magento

Especifique @font-display ao definir fontes personalizadas.

Recursos