Como usar pré-carregamento (preload) de fontes para acelerar a exibição do texto

Olá, amigo(a) desenvolvedor(a) ou dono(a) de site! Seja bem-vindo(a) ao seu guia de desempenho web com a GeHost — onde queremos que seu site carregue rápido, com estilo, e sem dor de cabeça.

No mundo digital, tempo é experiência. Quando um visitante chega ao seu site, ele não quer esperar. Ele quer ver o texto agora. E aqui entra um truque simples, poderoso e super eficaz: o pré-carregamento de fontes.

Sensei diz: “Se o texto não aparece, o site não existe.” Com o preload, você ajuda o navegador a antecipar o que ele vai precisar — e o texto aparece antes mesmo de o usuário perceber que está esperando.

O que é pré-carregamento de fontes?

Imagine que seu site usa uma fonte personalizada (como uma tipografia bonita e única). Quando o navegador carrega a página, ele precisa baixar essa fonte primeiro — e enquanto isso acontece, o texto fica em branco ou aparece com uma fonte padrão (como Arial ou Times). Isso é chamado de FOIT (Flash of Invisible Text).

O preload resolve isso. Ele diz ao navegador: “Ei, já sei que vou precisar dessa fonte. Vou baixar ela agora, antes de qualquer coisa.” Assim, quando o texto aparecer, já estará no formato certo — e o usuário não percebe o atraso.

Passo a passo: Como ativar o pré-carregamento de fontes

É bem simples. Siga comigo, passo a passo, como se fosse um ritual de otimização:

Acesse o painel do cPanel no seu site. Vá para painel.gehost.com.br e faça login com suas credenciais.
Na tela inicial do cPanel, localize a seção “Arquivos” e clique em “Gerenciador de Arquivos”.
No Gerenciador de Arquivos, navegue até a pasta principal do seu site: public_html.
Abra o arquivo index.html (ou o arquivo principal da sua página) para edição. Clique com o botão direito e selecione “Editar” ou “Code Editor”.

Se você usa WordPress ou outro CMS, o processo é um pouco diferente — mas o princípio é o mesmo. O preload precisa estar no HTML da página ou no arquivo de estilo (CSS).
Na parte do head do seu HTML (entre as tags <head> e </head>), adicione uma linha como esta:
```
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/sua-fonte.woff2">
    
```
Dica: Substitua /fonts/sua-fonte.woff2 pelo caminho real da sua fonte no site. Se a fonte estiver em public_html/css/fontes/minha-fonte.woff2, use esse caminho exato.
Salve o arquivo. Pronto! Agora o navegador vai começar a baixar a fonte antes de precisar exibi-la.

Importante: Se você usar mais de uma fonte (por exemplo, negrito, itálico, etc.), adicione uma linha <link rel="preload"> para cada uma delas.

Exemplo prático

Suponha que você tenha uma fonte chamada Neue-Font com os arquivos:

neue-font-regular.woff2
neue-font-bold.woff2
neue-font-italic.woff2

No seu head, você adiciona:

<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/neue-font-regular.woff2">
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/neue-font-bold.woff2">
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/neue-font-italic.woff2">

Dica extra: Use o Google Fonts com preload

Se você usa fontes do Google Fonts, o preload ainda funciona — mas com um toque especial:

Em vez de apenas incluir o link do Google Fonts, adicione o preload diretamente no HTML. Por exemplo:

<link rel="preload" as="font" type="font/woff2" crossorigin href="https://fonts.gstatic.com/s/opensans/v23/mem8YaGs126MiZpBA-UFVZ0b.woff2">

Isso é especialmente útil se você está usando uma fonte customizada com font-display: swap — o preload garante que o texto não fique invisível.

Resultado?

Seu site vai carregar mais rápido, com o texto aparecendo imediatamente — sem aquele “pulo” de aparência. Seu visitante não percebe o tempo de carregamento, só vê um site bonito, limpo e rápido.

Sensei diz: “O melhor site é aquele que parece estar sempre pronto. Com preload, você está dando esse presente ao seu público.”

Quer saber mais?

Se precisar de ajuda com o caminho da fonte, ou quiser testar como seu site está carregando, entre em contato com o suporte da GeHost — estamos aqui para te ajudar, com um sorriso e um café virtual.

Seu site merece ser rápido. E você merece ter orgulho dele.

Com carinho,
Sensei da GeHost
*Equipe de Desempenho & CDN — G e Soluções e Eventos LTDA (CNPJ: 46.647.904/0001-04)*

Como usar pré-carregamento (preload) de fontes para acelerar a exibição do texto