Como otimizar o carregamento de fontes web com font-display e preload (para sites mais rápidos!)
Olá, querido(a) cliente da GeHost! 👋
Você já percebeu que algumas páginas demoram um pouco para mostrar o texto corretamente? Talvez você veja um texto "falso" ou em uma fonte diferente enquanto a sua fonte preferida carrega? Isso acontece por causa do carregamento de fontes web — especialmente quando usamos o Google Fonts. Mas calma! Hoje, o Sensei da GeHost vai te ensinar um truque simples, poderoso e super eficaz para deixar seu site mais rápido, com texto bonito e sem travamentos. Vamos lá?Por que as fontes web atrasam o site?
Quando você usa uma fonte do Google Fonts (como Roboto, Open Sans ou Playfair Display), o navegador precisa baixar esse arquivo de fonte antes de exibir o texto corretamente. Isso pode atrasar o carregamento da página, especialmente em celulares ou conexões lentas.
Se não cuidarmos disso, o usuário pode ver um texto “falso” (em uma fonte padrão) enquanto espera a fonte carregar — e isso atrapalha a experiência.
É aí que entram dois truques mágicos: font-display e preload.
Passo a passo: como usar font-display e preload (em 3 etapas simples)
1. Adicione o preload na tag <head>
Antes de qualquer coisa, digamos ao navegador: “Ei, eu sei que vou precisar dessa fonte — já comece a baixar agora!”
Abra o arquivo index.html do seu site (ou o arquivo principal onde você carrega o Google Fonts).
Localize a linha onde você inclui o Google Fonts, tipo:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">Substitua por este código:
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" >
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" >Por que isso funciona? O navegador começa a baixar a fonte antes de ler o estilo, deixando o texto pronto mais rápido.
2. Use font-display: swap na URL do Google Fonts
Esse é o coração da otimização! O parâmetro display=swap (que já está no exemplo acima) é o que faz a mágica.
O que ele faz? Ele diz ao navegador:
- “Se a fonte ainda não carregou, mostre o texto com uma fonte padrão (como Arial ou sans-serif) imediatamente.”
- “Assim que a fonte chegar, troque o texto para a fonte certa — sem travar a página.”
É como se o texto aparecesse rápido com uma fonte “temporária”, e depois, em segundos, trocasse para a fonte bonita. Ninguém percebe a diferença — só sente que o site é mais rápido!
✅ Dica do Sensei: Nunca use display=block ou display=auto — eles fazem o site esperar a fonte e atrasam tudo.
💡 Dica Bônus: Você pode testar o efeito no seu site com o Chrome DevTools — basta simular uma conexão lenta (em "Network" > "Throttling") e ver como o texto aparece imediatamente, mesmo sem a fonte completa.
3. (Opcional) Use font-display: optional para sites muito sensíveis ao tempo
Se o seu site precisa ser extremamente rápido — como uma landing page ou um site de e-commerce — você pode usar:
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=optional" >
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=optional" >Esse optional diz ao navegador: “Se a fonte demorar muito, não espere — use a fonte padrão mesmo.”
É ideal para sites onde o tempo de carregamento é tudo.
Resumo: os dois truques que você precisa lembrar
- Use
preload: Comece o download da fonte antes de tudo. - Use
display=swap: Mostre o texto rápido com uma fonte padrão, depois troque para a fonte certa.
Com isso, seu site carrega mais rápido, o usuário não percebe atrasos, e a experiência fica impecável — mesmo em celulares lentos!
Pronto! Você agora é um(a) especialista em desempenho web 🎯
Se precisar de ajuda para ajustar o código no seu site, ou quiser testar o resultado, nosso suporte está aqui — e é grátis nos primeiros 30 dias após a entrega do seu plano.
Seu site está mais rápido, mais bonito e mais profissional. E tudo isso com apenas alguns caracteres no código — como um verdadeiro web ninja!
Até a próxima dica, com carinho,
Sensei da GeHost 💚