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:
See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.
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.
Confira o codelab Evite flashes de texto invisível para aprender como evitar FOIT em todos os navegadores.
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