Corrigir Ensure text remains visible during webfont load

Certifique-se de que o texto continua visível durante o carregamento de webfonts

Antes de as webfonts existirem, os web designers ficavam 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.

As webfonts geralmente são arquivos grandes que não vêm instalados em um computador por padrão. Portanto, as webfonts devem ser baixadas antes que possam ser usadas. Durante o download de uma webfont, o texto em uma página web ficará temporariamente oculto até que a webfont seja totalmente carregada. Isso resulta em 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 é o que causa o aparecimento da mensagem de erro "Ensure text remains visible during webfont load".

Está carregando uma webfont na sua página e não tomou nenhuma precaução para evitar esse Flash of Invisible Text? Enquanto você analisa o PageSpeed Insights 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 pode chegar facilmente a 100ms.

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

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

O Google acha importante que uma página da web forneça a melhor user experience possível. A user experience pode ser melhorada exibindo 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á ocultando. Se o texto for o seu elemento de 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

Nenhum 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 exibir o texto de qualquer maneira, não na fonte final, mas em uma fonte de "fallback". 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 (Flash de Texto Invisível) 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 (Flash de Texto Sem Estilo).

Torne as 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 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 quatro valores de font-display que você deve conhecer:

• swap: Mostra a fonte de fallback imediatamente e, em seguida, troca para a webfont quando ela é carregada. A janela de troca é infinita, então a webfont sempre substitui o fallback eventualmente. Melhor para fontes de marca e títulos.
• optional: Mostra a fonte de fallback imediatamente. O navegador decide se deve trocar com base na velocidade de conexão. Nenhuma troca 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 pequena janela (~3 segundos) para carregar. Se perder a janela, o fallback permanece. Um meio-termo entre swap e optional.
• block: Oculta o texto por até 3 segundos enquanto a fonte carrega. Essa é a causa do FOIT. Não use isso a menos que você tenha um motivo específico (como fontes de ícones).

De acordo com o Web Almanac 2025, 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 o texto aparecer 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 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 estilos ou código de incorporação.

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

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

O método @import é bloqueador de renderização e força o navegador a baixar as folhas de estilo sequencialmente. O método <link> é mais rápido porque o navegador pode descobrir a folha de estilos da fonte mais cedo no processo de análise.

Mas não somos fãs de nenhuma dessas abordagens. Quase sempre é muito mais rápido hospedar as webfonts você mesmo. Isso lhe dá mais controle sobre o processo de "pré-carregamento" das fontes. Você pode usar a conexão HTTP/2 já existente e não precisa baixar uma folha de estilos extra.

Fontes locais

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

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

Evite a mudança de layout ao trocar as fontes

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

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 a troca cause pouca ou nenhuma mudança visível. O suporte do navegador está acima de 93%, incluindo o Safari 17+.

/* Defina 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 em sua pilha de fontes */
body {
 font-family: "Open Sans", "Open Sans Fallback", sans-serif;
}

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

Nos sites monitorados pelo CoreDash, as páginas que combinam font-display: swap com substituições de métricas de fonte têm 75% menos CLS relacionado a fontes do que as páginas que usam apenas o 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 são geralmente (mas não sempre) adicionadas ao elemento <body> ou <html>.

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

Esse método funciona da seguinte maneira: Indique na sua folha de estilos que uma página deve ser renderizada inicialmente com uma fonte (a fonte de fallback). Em seguida, você carrega a webfont através da API FontFace do JavaScript ou através de pré-carregamento. Depois que essa fonte for 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 ela corresponda melhor à webfont. Isso evita mudanças de layout.

Ao usar várias webfonts, você pode usar o método da API FontFace para alternar todas as fontes de uma só vez. Isso economiza muitas repinturas do navegador. Pessoalmente, não sou fã desse 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 API FontFace:

<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 aguarde a á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 preload

O segundo método é através de um link de pré-carregamento. Pré-carregue a fonte conforme descrito abaixo. Uma vez feito isso, alterne 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 depois 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 pré-carregue fontes visíveis. As fontes não são baixadas por padrão até que sejam realmente usadas em uma página. Se você precisar de uma webfont, pré-carregue-a para que fique disponível mais cedo.
2. Quer evitar o FOIT e o FOUT completamente? Use font-display: optional em combinação com o pré-carregamento.
3. Hospedar as webfonts você mesmo é sempre mais rápido do que webfonts via Google Fonts ou outra CDN externa.

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