Evite texto invisível durante o carregamento da fonte

Available in: English, Español, Русский, 中文, 日本語 e 한국어
Appears in: Tempos de carregamento rápidos
Katie Hempenius
Katie Hempenius
TwitterGitHubGlitchHomepage
Nesta página

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 #

AntesDepois
@font-face { font-family: Helvetica; } @font-face { font-family: Helvetica; <strong>font-display: swap;</strong> }

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:

NavegadorComportamento default se a fonte não estiver pronta...
EdgeUsa uma fonte do sistema até que a fonte esteja pronta. Depois troca a fonte.
ChromeEsconde o texto por até 3 segundos. Se o texto ainda não estiver pronto, usa uma fonte do sistema até que a fonte esteja pronta. Depois troca a fonte.
FirefoxEsconde o texto por até 3 segundos. Se o texto ainda não estiver pronto, usa uma fonte do sistema até que a fonte esteja pronta. Depois troca a fonte.
SafariEsconde o texto até que a fonte esteja pronta.

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:

  1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
  2. Click the Lighthouse tab.
  3. Make sure the Performance checkbox is selected in the Categories list.
  4. 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.

Last updated: — Improve article
Return to all articles
Compartilhar