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 ocorre a falha na auditoria de exibição de fontes do Lighthouse

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 é mostrada quando usada dentro de um estilo font-face. O seguinte Os valores font-display vão instruir o navegador a 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). Isso melhora a FCP&LCP, renderizando o conteúdo mais rapidamente, mas FOIT e FOUT terão o mesmo impacto na CLS quando a fonte personalizada substituir a temporária do sistema.

O impacto do CLS no carregamento de fontes pode ser atenuado usando pré-carregamentos com font-display: optional. No entanto, o uso excessivo de pré-carregamentos pode afetar negativamente as métricas de carregamento. Recomendamos realizar testes A/B para garantir que o pré-carregamento de fontes não introduza 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