Certifique-se de que o texto permaneça visível durante o carregamento de webfonts

Antes da existência das webfonts, os web designers estavam presos a apenas um pequeno número de fontes pré-instaladas. As webfonts dão a você a liberdade de usar qualquer fonte em um site. 

Claro que isso soa bem, mas as webfonts também têm suas desvantagens; elas diminuem a velocidade de carregamento da página de várias maneiras.

Webfonts geralmente são arquivos grandes que não são instalados em um computador por padrão. Portanto, as webfonts devem ser baixadas antes de poderem ser usadas. Durante o download de uma webfont, o texto em uma página da web ficará temporariamente oculto até que a webfont seja totalmente carregada. Isso contribui para uma experiência do usuário ruim; ninguém quer olhar para uma tela vazia por muito tempo.

Assim que a webfont é carregada e renderizada, o navegador substitui o "texto invisível" pelo texto final com a nova webfont. Este momento é chamado de Flash of Invisible Text (FOIT). Este FOIT é o que faz com que a mensagem de erro "Ensure text remains visible during webfont load" apareça..

Carregando uma webfont em sua página e não tomando nenhuma precaução para evitar este Flash of Invisible Text? Ao analisar o PageSpeed no Lighthouse, a seguinte mensagem aparecerá: "Ensure text remains visible during webfont load". Isso informa quanto tempo você poderia economizar tornando o texto visível antes que a webfont seja carregada. Para 1 única fonte, isso é facilmente 100ms.

Por que o texto invisível é ruim para a velocidade da página?

O texto invisível não diminuirá realmente o tempo de carregamento final medido de uma página. Então, por que o Lighthouse acha que é um problema tão grande? 

O Google acha importante que uma página da web forneça a melhor experiência do usuário possível. A experiência do usuário pode ser melhorada mostrando o conteúdo na página o mais rápido possível. Compare as duas versões em filmstrip de nossa página inicial abaixo:

Flash of Invisible Text

Sem flash de texto invisível com display:swap

Como você pode ver, as duas páginas terminaram de carregar exatamente ao mesmo tempo. Ainda assim, a versão mais recente do site parece muito melhor para os visitantes. Os visitantes podem começar a ler imediatamente.

É por isso que é inteligente mostrar o texto de qualquer maneira - não na fonte final, mas em uma fonte de "fallback" (alternativa). Dessa forma, o visitante pensa que sua página realmente carrega super rápido.

Um breve lembrete: FOIT e FOUT

Antes de prosseguirmos, é útil distinguir os seguintes conceitos: FOIT e FOUT. FOIT significa Flash of Invisible Text e ocorre quando as webfonts não são visíveis durante o carregamento. Você pode atenuar isso incluindo uma fonte de fallback. Quando a fonte de fallback é substituída pela webfont, é chamado de FOUT, Flash of Unstyled Text.

Tornar as webfonts visíveis durante o carregamento

Existem duas maneiras de tornar as webfonts visíveis durante o carregamento: a primeira é através do valor CSS font-display; a segunda é usando uma fonte de fallback através de uma classe. Ambos os métodos têm vantagens e desvantagens, que discutirei abaixo.

Método 1: Font-display:swap

Font-display é um descritor CSS que está disponível para todos os navegadores modernos. O descritor font-display determina como uma fonte é exibida com base em se e quando ela foi baixada. Font-display é usado em uma regra @font-face. 

Existem diferentes valores de font-display: block, swap, fallback e optional. Use o valor swap para evitar o FOIT e, para que o texto apareça na tela o mais rápido possível, use o valor swap. 

Depois de definirmos o valor font-display: swap na regra @font-face, as fontes padrão do sistema são usadas enquanto a página carrega até que as webfonts sejam carregadas. Isso ajuda o visitante a ler o texto na página imediatamente.

Google fonts

Ao usar o Google fonts, você pode usar o método font-display: swap com um simples "&display=swap" na folha de estilo ou código de incorporação.  

<!-- via uma folha de estilo externa -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

<!-- via o método de importação -->
<style>
 @import url ('https://fonts.googleapis.com/css?family=Open+Sans&display=swap); 
</style>

A propósito, não somos fãs do Google fonts. É quase sempre muito mais rápido hospedar webfonts você mesmo. Isso lhe dá mais controle sobre o processo de "preloading" das fontes. Você pode usar a conexão http/2 já existente e não precisa baixar uma folha de estilo extra.

Fontes locais

@font-face { 
 font-family: "Open Sans";  
 font-weight: 400; 
 font-style: normal; 
 src: url("OpenSans400.woff2") format("woff2"); 
 
}

Método 2: Fontes com uma classe

A segunda maneira de tornar as fontes visíveis durante o carregamento é trabalhar com classes. Essas classes geralmente (mas nem sempre) são adicionadas ao elemento <body> ou <html>.

A vantagem deste método é que você tem mais controle sobre a fonte de fallback e o tempo do Flash of Unstyled Text.

Este método funciona da seguinte forma: Indique em sua folha de estilo que uma página deve inicialmente ser renderizada com uma fonte (a fonte de fallback). Em seguida, você carrega a webfont por meio da API FontFace do JavaScript ou por preloading. Após esta fonte ter sido carregada, adicione uma classe à sua página. A classe garante que a webfont seja ativada.

Por que você faria isso, você pode perguntar? Você faz isso para obter mais controle sobre a fonte de fallback. Você pode exibir a fonte de fallback com um espaçamento de linha maior ou um tamanho diferente para que corresponda melhor à webfont. Isso evita as mudanças de layout (layout shifts).

Ao usar várias webfonts, você pode usar o método da API FontFace para alternar todas as fontes de uma vez. Isso economiza muitas repinturas (repaints) do navegador. Pessoalmente, não sou fã deste método; isso garante que o FOUT ocorra após a última fonte ter sido carregada. Portanto, isso é sempre mais tarde do que o necessário.

Fonte com uma classe via a API FontFace:

<style>
  //fonte de fallback com um font-size de .9rem
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }  

  //fonte webfont com um font-size de 1rem
  html.fl{
    font-family: 'webfont';
    font-size:1rem;
  }
</style>

<script>
var font = new FontFace("webfont", "url(/font.woff2)", {
  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});

// não espere pela árvore de renderização, inicie uma busca imediata!
font.load().then(function() {
  document.fonts.add(font);
  document.documentElement.classList.add("fl")
});
</script>

Através de um link de preload

O segundo método é através de um link de preload. Faça o preload da fonte conforme descrito abaixo. Feito isso, altere a classe do elemento <html>.

<link 
  rel="preload" 
  href="/webfont.woff2" 
  as="font" 
  type="font/woff2" crossorigin
  onload="document.documentElement.classList.add('fl')">

<style>
  //fonte de fallback com um font-size de .9rem
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }  

  //fonte webfont com um font-size de 1rem
  html.fl{
    font-family: 'webfont';
    font-size:1rem;
  }

  //fontface, só é ativado assim que a classe .fl for adicionada à tag html
  @font-face{
    font-family:'Open Sans';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src: url(/webfont.woff2) format("woff2");
    unicode-range:U+000-00FF;
  }</style>

Dicas e truques extras

1.    Sempre faça o preload de https://www.corewebvitals.io/nl/pagespeed/ensure-text-remains-visible-during-web font-load? fontes visíveis. As fontes não são baixadas por padrão até que uma fonte seja usada. Tem certeza que precisa de uma webfont? Nesse caso, faça o preload para que ela fique disponível mais cedo.
2. Quer evitar totalmente o FOIT e o FOUT? Use font-display: optional em combinação com o preloading.
3. Hospedar as webfonts você mesmo é sempre mais rápido do que webfonts via Google fonts ou outra CDN externa.