Corrigir Ensure text remains visible during webfont load

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

Antes de as webfonts existirem, os web designers ficavam restritos 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 parece bom, mas as webfonts também têm suas desvantagens; elas reduzem a velocidade de carregamento da página de várias maneiras.

As webfonts geralmente são arquivos grandes que não estão instalados em um computador por padrão. Portanto, as webfonts devem ser baixadas antes de poderem ser usadas. Ao baixar uma webfont, o texto em uma página da web ficará temporariamente oculto até que a webfont seja carregada completamente. Isso gera uma user experience ruim; ninguém quer ficar olhando 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. Esse momento é chamado de Flash of Invisible Text (FOIT). É esse FOIT que faz com que a mensagem de erro "Ensure text remains visible during webfont load" apareça.

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

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

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

O Google acha que é importante que uma página da web forneça a melhor user experience possível. A user experience pode ser melhorada mostrando o conteúdo na página o mais rápido possível. O texto invisível afeta diretamente o seu First Contentful Paint (FCP) porque o navegador não pode pintar o texto que está escondendo. Se o texto for o seu elemento Largest Contentful Paint (LCP), o FOIT também atrasa essa métrica. Compare as duas versões de filmstrip da nossa homepage abaixo:

Flash of Invisible Text

Sem flash of invisible text 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 forma, não na fonte final, mas em uma fonte de "fallback". Dessa forma, o visitante acha 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 estão visíveis durante o carregamento. Você pode mitigar isso incluindo uma fonte de fallback. Quando a fonte de fallback é substituída pela webfont, isso é chamado de FOUT, Flash of Unstyled Text.

Tornar webfonts visíveis durante o carregamento

Existem duas maneiras de tornar as webfonts visíveis durante o carregamento: a primeira é por meio do valor CSS font-display; a segunda é usando uma fonte de fallback por meio 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 foi baixada. Font-display é usado em uma regra @font-face.

Existem quatro valores de font-display que você deve conhecer:

• swap: Mostra a fonte de fallback imediatamente e, em seguida, muda para a webfont quando ela carrega. A janela de swap é infinita, então a webfont sempre substitui a de fallback eventualmente. Melhor para fontes de marca e títulos.
• optional: Mostra a fonte de fallback imediatamente. O navegador decide se fará o swap com base na velocidade da conexão. Sem swap significa zero layout shift. Melhor para o texto do corpo, onde a performance é a prioridade.
• fallback: Mostra a fonte de fallback imediatamente e, em seguida, dá à webfont uma janela curta (~3 segundos) para carregar. Se perder a janela, a fonte de fallback permanece. Um meio-termo entre swap e optional.
• block: Oculta o texto por até 3 segundos enquanto a fonte é carregada. Esta é a causa do FOIT. Não use isso a menos que você tenha um motivo específico (como icon fonts).

De acordo com o 2025 Web Almanac, apenas 50% dos sites usam font-display: swap, enquanto 25% ainda usam block. Isso significa que um quarto da web ainda está exibindo texto invisível durante o carregamento de fontes.

Use o valor swap para evitar o FOIT e fazer com que o texto apareça na tela o mais rápido possível. 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 tenham sido 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" no stylesheet ou no código de incorporação.

<!-- por meio de um stylesheet externo -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

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

O método @import é de bloqueio de renderização e força o navegador a fazer o download de stylesheets sequencialmente. O método <link> é mais rápido porque o navegador pode descobrir o stylesheet da fonte mais cedo no processo de parsing.

Mas não somos fãs de nenhuma das abordagens. É quase sempre muito mais rápido hospedar as 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 um stylesheet extra.

Fontes locais

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

WOFF2 é tudo que você precisa. Ele é suportado em todos os navegadores modernos e oferece a melhor compactação. De acordo com o 2025 Web Almanac, 72% dos sites agora hospedam suas próprias fontes, e o WOFF2 representa 65% de todas as solicitações de fontes da web. Não há mais razão para incluir WOFF ou TTF como formatos de fallback.

Evite layout shift ao fazer swap de fontes

Há um detalhe no font-display: swap. Quando o navegador faz o swap da fonte de fallback para a webfont, o texto frequentemente muda de tamanho. Fontes diferentes têm larguras de caracteres, alturas de ascendente e espaçamento de linha diferentes. Essa mudança de tamanho causa Cumulative Layout Shift (CLS), que é um Core Web Vital.

A correção é o descritor CSS size-adjust. Ele dimensiona a fonte de fallback para corresponder às dimensões da sua webfont, de modo que o swap causa pouco ou nenhum shift visível. O suporte do navegador está acima de 93%, incluindo Safari 17+.

/* Definir uma fonte de fallback correspondente */
@font-face {
 font-family: "Open Sans Fallback";
 src: local("Arial");
 size-adjust: 105%;
 ascent-override: 110%;
 descent-override: 25%;
 line-gap-override: 0%;
}

/* Use ambas na sua stack de fontes */
body {
 font-family: "Open Sans", "Open Sans Fallback", sans-serif;
}

Os descritores ascent-override, descent-override e line-gap-override fornecem um controle ainda mais preciso sobre as métricas verticais. Eles funcionam no Chrome, Firefox e Edge, mas ainda não no Safari, então trate-os como um aprimoramento progressivo (progressive enhancement). A propriedade size-adjust por si só já faz uma diferença notável.

Em sites monitorados pelo CoreDash, as páginas que combinam font-display: swap com substituições de métricas de fontes têm 75% menos CLS relacionado a fontes do que páginas que usam apenas swap.

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 desse método é que você tem mais controle sobre a fonte de fallback e o tempo (timing) do Flash of Unstyled Text.

Esse método funciona da seguinte maneira: Indique no seu stylesheet que uma página deve ser renderizada inicialmente com uma fonte (a fonte de fallback). Você então carrega a webfont através da FontFace API do JavaScript ou através de preloading. Depois que esta fonte for carregada, adicione uma classe à sua página. A classe garante que a webfont seja ativada.

Por que você faria isso, você deve se 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 ela corresponda melhor à webfont. Isso evita os layout shifts.

Ao usar várias webfonts, você pode usar o método FontFace API para mudar todas as fontes de uma vez. Isso economiza muitos repaints do navegador. Pessoalmente, não sou fã deste método; ele garante que o FOUT ocorra depois que a última fonte for carregada. Portanto, isso é sempre mais tarde do que o necessário.

Fonte com uma classe via FontFace API:

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

  // webfont com 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 (render tree), inicie um fetch imediato!
font.load().then(function() {
  document.fonts.add(font);
  document.documentElement.classList.add("fl")
});
</script>

Via um link de preload

O segundo método é através de um link de preload. Faça o preload da fonte como descrito abaixo. Feito isso, mude 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 font-size de .9rem
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }

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

  // @font-face, ativado apenas quando 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 preload das fontes visíveis. As fontes não são baixadas por padrão até que sejam realmente usadas em uma página. Se você precisa de uma webfont, faça o preload para que ela esteja disponível mais cedo.
2. Quer evitar FOIT e FOUT totalmente? Use font-display: optional em combinação com preloading.
3. Hospedar webfonts você mesmo é sempre mais rápido do que webfonts via Google Fonts ou outra CDN externa.

Quer verificar se sua estratégia de carregamento de fontes realmente melhora a user experience real? Use Real User Monitoring para rastrear o seu FCP e CLS antes e depois de fazer alterações.