Evite texto invisível durante o carregamento da fonte
Por que você deveria se importar? #
As fontes geralmente são arquivos grandes que demoram um pouco para carregar. Para lidar com isto, alguns navegadores ocultam o texto até que a fonte carregue (o "flash de texto invisível"). Se você está otimizando para melhorar o desempenho, o ideal é evitar o "flash de texto invisível" e mostrar o conteúdo aos usuários imediatamente usando uma fonte do sistema (o "flash de texto não estilizado").
Exiba o texto imediatamente #
Este guia descreve duas maneiras de fazer isto: a primeira abordagem é muito simples, mas não é suportado por todos os navegadores; a segunda abordagem é mais trabalhosa, mas tem suporte em todos os navegadores. A melhor escolha para você é aquela que você irá implementar e manter.
Opção 1: usar font-display #
font-display
é uma API para especificar a estratégia de exibição de fontes. A opção swap
informa ao navegador que o texto usando essa fonte deve ser exibido imediatamente usando uma fonte do sistema. Assim que a fonte personalizada estiver pronta, a fonte do sistema será trocada.
Se um navegador não suporta font-display
, ele continuará a seguir seu comportamento default para carregar fontes. Verifique quais navegadores suportam font-display
aqui.
Estes são os comportamentos default de carregamento de fonte para navegadores comuns:
Opção 2: Antes de usar fontes personalizadas espere até que sejam carregadas #
Com um pouco mais de trabalho, o mesmo comportamento pode ser implementado para funcionar em todos os navegadores.
Esta abordagem tem três partes:
- Não use uma fonte personalizada no carregamento da página inicial. Isto garante que o navegador exiba o texto imediatamente usando uma fonte do sistema.
- Detecte quando sua fonte personalizada for carregada. Isto pode ser feito com algumas linhas de código JavaScript, graças à biblioteca FontFaceObserver.
- Atualize o estilo da página para usar a fonte personalizada.
Aqui estão as mudanças que você precisa realizar para implementar isto:
- Refatore seu CSS para não usar uma fonte personalizada no carregamento inicial da página.
- Adicione um script à sua página. Este script detecta quando a fonte personalizada é carregada e, em seguida, atualiza o estilo da página.
Verificação #
Execute o Lighthouse para verificar se o site está usando font-display: swap
para exibir texto:
- Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
- Click the Lighthouse tab.
- Make sure the Performance checkbox is selected in the Categories list.
- Click the Generate report button.
Confirme que a verificação passa na auditoria Assegure que o texto permanece visível durante a carga de fontes web.