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

As fontes geralmente são arquivos grandes com carregamento lento. Alguns navegadores ocultam o texto até que a fonte seja carregada, o que causa 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 fonte que podem atualizar texto invisível:

Uma captura de tela da auditoria "Verifique se o texto permanece visível durante os carregamentos de fonte da Web"

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

A API font-display indica como uma fonte é mostrada quando usada em um estilo font-face. Os valores de font-display abaixo 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 do Google Fonts:

<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 substitui um FOIT por um flash de texto sem estilo (FOUT, na sigla em inglês). Isso melhora o FCP e LCP renderizando conteúdo mais cedo, mas FOIT e FOUT terão o mesmo impacto na CLS quando a fonte personalizada substituir a fonte temporária do sistema.

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

Orientação específica da pilha

Drupal

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

Magento

Especifique @font-display ao definir fontes personalizadas.

Recursos