Como configurar preload de fontes pra evitar troca visual de texto (FOIT/FOUT)

Preload de Fontes: o fim daquele "pulinho" de texto na tela 👋

Já aconteceu de você abrir um site e, por um segundo, o texto aparecer com uma fonte "genérica" e feia, pra depois — toc — trocar pra fonte bonita do design? Ou pior: o texto simplesmente sumir por um instante e só aparecer depois? Calma, isso tem nome (e tem solução simples).

Eu sou a Sensei da GeHost, e hoje vou te ensinar, com bastante carinho e sem enrolação técnica, como resolver isso configurando o preload de fontes no seu site. Vamos nessa? 🙏

Primeiro, o que é esse "pulinho" de texto?

Esse comportamento tem dois apelidos técnicos que você não precisa decorar, só entender:

• FOUT (Flash of Unstyled Text): o navegador mostra o texto com uma fonte padrão do sistema e, quando a fonte "de verdade" termina de carregar, troca na sua frente.
• FOIT (Flash of Invisible Text): o navegador esconde o texto completamente até a fonte carregar — e se a conexão do visitante for lenta, ele fica olhando pra uma tela "quase em branco".

Os dois acontecem pelo mesmo motivo: a fonte personalizada do seu site é um arquivo (geralmente .woff2) que precisa ser baixado, e o navegador só descobre que precisa dele quando já está lendo o CSS — ou seja, meio tarde no processo de carregar a página.

Dica da Sensei: esse detalhe parece pequeno, mas afeta a sensação de "site rápido e profissional" que seu visitante tem logo nos primeiros segundos. Vale muito a pena ajustar!

A solução: avisar o navegador com antecedência (preload)

O preload é uma instrução que você coloca no <head> do seu site dizendo ao navegador: "ei, essa fonte aqui é importante, comece a baixar ela AGORA, antes de qualquer outra coisa". Assim, quando o navegador terminar de montar o texto, a fonte certa já está pronta — sem troca visual, sem texto invisível.

Passo 1 — Descubra o caminho do arquivo da fonte

Toda fonte personalizada do seu site é um arquivo hospedado dentro da sua conta (geralmente numa pasta como fonts ou assets/fonts, dentro de public_html). Para localizá-lo:

1. Acesse o cPanel da sua hospedagem GeHost.
2. Abra o Gerenciador de Arquivos (File Manager).
3. Navegue até a pasta public_html do seu site e procure a pasta de fontes ou de assets do tema.
4. Anote o caminho completo do arquivo de fonte, algo como /wp-content/themes/seu-tema/fonts/minha-fonte.woff2.

Se o seu site foi feito em WordPress ou outro sistema com "construtor visual" (page builder), muitas vezes esse caminho já vem pronto quando você olha o código-fonte da página (clique com o botão direito no site → "Exibir código-fonte" e procure por .woff2).

Passo 2 — Adicione a tag de preload no <head>

Com o caminho da fonte em mãos, edite o arquivo de cabeçalho do seu site (em temas WordPress costuma se chamar header.php) usando o próprio Gerenciador de Arquivos, e insira a linha abaixo dentro da tag <head>, de preferência logo no início:

<link rel="preload" href="/wp-content/themes/seu-tema/fonts/minha-fonte.woff2" as="font" type="font/woff2" crossorigin>

Repare em três detalhes importantes dessa linha:

• href: o caminho exato do arquivo que você anotou no Passo 1.
• as="font" e type="font/woff2": avisam ao navegador que tipo de arquivo é — sem isso, o preload não funciona direito.
• crossorigin: praticamente sempre necessário para fontes, mesmo quando o arquivo está no seu próprio domínio. Pode deixar sempre presente.

Se o seu site usa mais de uma fonte (ex.: uma para títulos e outra para o texto normal), repita a linha para cada arquivo — mas com moderação: fazer preload de muitas fontes de uma vez pode atrapalhar o carregamento de outros recursos importantes da página.

Passo 3 — Garanta um "plano B" suave com font-display

Mesmo com o preload, é uma boa prática adicionar a propriedade font-display: swap na declaração @font-face do seu CSS. Ela diz ao navegador: "enquanto a fonte não chega, mostra o texto com uma fonte padrão, sem esconder nada — e troca suavemente assim que a fonte estiver pronta". Fica assim:

@font-face {
  font-family: 'MinhaFonte';
  src: url('/wp-content/themes/seu-tema/fonts/minha-fonte.woff2') format('woff2');
  font-display: swap;
}

Essa combinação — preload + font-display: swap — é o "casal perfeito" contra FOIT e FOUT: a fonte chega rápido (preload) e, se por acaso demorar um pouquinho, o texto aparece de qualquer forma, sem sumir (font-display).

Passo 4 — Salve e teste

1. Salve o arquivo editado no Gerenciador de Arquivos.
2. Abra seu site em uma aba anônima do navegador (para evitar cache antigo).
3. Recarregue a página algumas vezes e observe: o texto deve aparecer já com a fonte certa, sem piscar ou trocar.

Dica da Sensei: se você não se sentir confortável editando arquivos de tema, sem problema nenhum — isso é normal! Você pode pedir ajuda a quem desenvolveu seu site, ou consultar o suporte da GeHost para orientações sobre o seu caso específico.

Cuidados para não errar a mão

• Só faça preload das fontes que aparecem "acima da dobra" (a parte da página que o visitante vê sem rolar). Fontes usadas só lá embaixo na página não precisam de prioridade.
• Sempre confira se o caminho do arquivo está certo. Um caminho errado faz o navegador baixar a fonte "de graça" sem ela ser usada — o que na verdade deixa o site mais lento, não mais rápido.
• Prefira o formato .woff2 quando disponível: é o mais leve e o mais compatível com navegadores modernos.

Pronto! Com esses passos, seu site fica com uma experiência de leitura muito mais suave logo na primeira impressão — e isso conta muito pra quem visita pela primeira vez. Qualquer dúvida durante a edição dos arquivos, o suporte da GeHost está por aqui para te ajudar. Um abraço da Sensei! 🌸