Skip to content
Sobre Blog Aprender Explorar padrões Case studies
Nesta página
  • Por que você deveria se importar?
  • Exiba o texto imediatamente
  • Opção 1: usar font-display
  • Opção 2: Antes de usar fontes personalizadas espere até que sejam carregadas
  • Verificação

Evite texto invisível durante o carregamento da fonte

Nov 5, 2018
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?
  • Exiba o texto imediatamente
  • Opção 1: usar font-display
  • Opção 2: Antes de usar fontes personalizadas espere até que sejam carregadas
  • Verificação

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.

Experimente

Use o Font Face Observer para exibir o texto imediatamente.

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.

Desempenho
Last updated: Nov 5, 2018 — Improve article
Codelabs

See it in action

Learn more and put this guide into action.

  • Avoid flash of invisible text
Return to all articles
Compartilhar
assinar

Contribute

  • Registrar um bug
  • Visualizar código-fonte

Conteúdo relacionado

  • developer.chrome.com
  • Atualizações do Chrome
  • Estudos de caso
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos os produtos
  • Termos e privacidade
  • Diretrizes da comunidade

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.