Garanta que o texto permanece visível durante o carregamento das fontes web

As fontes geralmente são arquivos grandes que demoram um pouco para carregar. Alguns navegadores ocultam o texto até que a fonte carregue, causando um flash de texto invisível (Flash Of Invisible Text - FOIT) .

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

O Lighthouse sinaliza todas as URLs de fonte que podem ocultar texto invisível:

# Como evitar mostrar texto invisível

A maneira mais fácil de evitar a exibição de texto invisível durante o carregamento de fontes personalizadas é mostrar temporariamente uma fonte do sistema. Ao incluir font-display: swap no seu estilo @font-face, você pode evitar FOIT na maioria dos navegadores modernos:

@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;
}

A API font-display especifica como uma fonte é exibida. swap informa ao navegador que o texto usando a fonte deve ser exibido imediatamente usando uma fonte do sistema. Assim que a fonte personalizada estiver pronta, ela substituirá a fonte do sistema. (Veja Evite texto invisível durante o carregamento para mais informações.)

# Pré-carregue as fontes da web

Use <link rel="preload" as="font"> para baixar seus arquivos de fonte com antecedência. Saiba mais:

• Pré-carregue fontes da web para melhorar a velocidade de carregamento (codelab)
• Evite mudanças de layout e flashes de texto invisível (FOIT) pré-carregando fontes opcionais

# Google Fonts

Adicione o parâmetro &display=swap ao final da URL do Google Fonts:

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

# Suporte de navegador

Vale a pena mencionar que nem todos os principais navegadores suportam font-display: swap, então você poderá ter que trabalhar um pouco mais para consertar o problema do texto invisível.

# Orientações específicas para diferentes pilhas

# Drupal

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

# Magento

Especifique @font-display ao definir fontes personalizadas .

# Recursos

• Código-fonte para a auditoria Garanta que o texto permanece visível durante a carga de fontes da web
• Evite texto invisível durante o carregamento
• Controlando o desempenho da fonte com font-display
• Pré-carregue fontes da web para melhorar a velocidade de carregamento (codelab)
• Evite mudanças de layout e flashes de texto invisível (FOIT) pré-carregando fontes opcionais