Como configurar preload de fontes para acelerar a renderização do site
Olá, amigo(a) desenvolvedor(a) ou dono(a) de site! Seja muito bem-vindo(a) ao seu novo passo rumo a um site mais rápido, mais leve e mais agradável para seus visitantes. Aqui, na GeHost, acreditamos que o tempo é ouro — e cada milissegundo conta. Hoje, vamos aprender juntos como usar o preload de fontes para acelerar a renderização do seu site. É uma técnica simples, poderosa e muito eficaz!
Dica do Sensei: Quando um site carrega fontes (como Google Fonts ou fontes personalizadas), ele pode "ficar em branco" ou exibir texto em uma fonte padrão até que a fonte especial esteja pronta. Isso causa um "flash de texto não formatado" — chamado de FOIT (Flash of Invisible Text). O preload ajuda a evitar isso!
O que é preload de fontes?
É uma instrução que você dá ao navegador: "Antes de carregar o resto da página, já comece a baixar essa fonte!". Assim, quando o navegador precisar exibir o texto com aquela fonte, ela já estará pronta — sem atrasos, sem travamentos, sem frustrações.
Passo a passo: Como configurar no seu site (com GeHost)
Para usar o preload de fontes, vamos editar o arquivo index.html ou o arquivo de cabeçalho do seu site (geralmente header.php ou head.html). Vamos fazer isso diretamente no Gerenciador de Arquivos do cPanel — o coração do seu site.
- Entre no painel do cliente em painel.gehost.com.br com seu usuário e senha.
- Na área de Hospedagem, clique em Gerenciar (ou "cPanel") ao lado do domínio do seu site.
- Na tela do cPanel, procure por Gerenciador de Arquivos e clique nele.
- No painel, navegue até a pasta
public_html(ou a pasta raiz do seu site). - Localize o arquivo principal do seu site: geralmente
index.html,index.php, ouheader.php. Clique com o botão direito e selecione Editar. - Abra o arquivo e procure pela seção
<head>— é onde ficam os metadados do site. - Antes do fechamento da tag
</head>, adicione uma linha como esta:
<link rel="preload" as="font" type="font/woff2" crossorigin href="https://seusite.com.br/fontes/MinhaFonte.woff2">
Substitua os valores pelos seus dados reais:
https://seusite.com.br/fontes/MinhaFonte.woff2→ o caminho real da sua fonte no servidor.- Se estiver usando fontes do Google, o URL será algo como:
https://fonts.gstatic.com/s/roboto/v20/2w8YR67jx7k666Y720790Xa18Y954Z3568K35503672.woff2. - Use
as="font"para indicar que é uma fonte. type="font/woff2"é o formato mais moderno e eficiente.crossoriginé necessário para fontes externas (como Google Fonts).
Importante: Se a fonte estiver no mesmo domínio, o caminho pode ser relativo:
fontes/MinhaFonte.woff2. Mas ohrefdeve sempre ser um caminho acessível via HTTP(S).
Exemplo prático com Google Fonts
Se você está usando a fonte Roboto do Google, adicione isso no <head>:
<link rel="preload" as="font" type="font/woff2" crossorigin href="https://fonts.gstatic.com/s/roboto/v20/2w8YR67jx7k666Y720790Xa18Y954Z3568K35503672.woff2">
Isso fará com que o navegador comece a baixar a fonte assim que o HTML for carregado — mesmo antes de renderizar o texto. O resultado? Um site que parece "pronto" imediatamente!
Dica extra: Use apenas o necessário
Não preloading todas as fontes do mundo. Use apenas as que são essenciais para o primeiro carregamento da página. Cada preload aumenta um pouco a carga inicial, então escolha com sabedoria.
Como verificar se está funcionando?
Abra o navegador, pressione F12 (DevTools), vá até a aba Network, recarregue a página e procure por arquivos com extensão .woff2 ou .ttf. Você verá que eles aparecerão com o status Preload — isso é sinal de que tudo está funcionando!
Senso comum do Sensei: Se algo não estiver funcionando, verifique se o caminho da fonte está correto, se o arquivo existe no servidor e se o navegador não está cacheando uma versão antiga. Às vezes, apenas limpar o cache ajuda!
Conclusão
Configurar o preload de fontes é uma das formas mais simples e eficazes de melhorar a experiência do usuário. Com apenas uma linha no cabeçalho do seu site, você acelera a renderização, evita o "flash de texto" e deixa seu site mais profissional.
Se precisar de ajuda com o caminho da fonte, do código ou do upload, é só entrar em contato com o nosso suporte — estamos aqui para te ajudar, com um sorriso no coração. 💚
Até a próxima dica, e lembre-se: o site que carrega rápido é o que conquista o coração do visitante.
