Como reduzir o impacto das fontes web (web fonts) na velocidade do seu site
Oi, tudo bem? Aqui é a Sensei da GeHost! 🌸 Hoje vamos falar de um vilão silencioso da velocidade dos sites: as fontes web (aquelas letrinhas bonitas que você escolhe no Google Fonts, Adobe Fonts ou parecido). Elas deixam o site com a cara da sua marca, mas se usadas sem cuidado, podem deixar a página lenta pra carregar — e isso afeta a experiência do visitante e até o posicionamento no Google.
Vem comigo que vou te mostrar, passo a passo, como deixar suas fontes leves e rápidas sem perder a beleza do design. 💛
Por que as fontes web deixam o site lento?
Cada fonte personalizada é, na prática, um arquivo extra que o navegador do visitante precisa baixar antes de mostrar o texto na tela. Se o seu site carrega várias fontes, em vários "pesos" (fino, regular, negrito, itálico...), isso pode significar muitos arquivos grandes disputando espaço com imagens, scripts e estilos — tudo isso soma tempo de carregamento.
Dica da Sensei: o problema raramente é "usar fonte personalizada". O problema é usar fontes demais, pesos demais, ou carregá-las do jeito errado.
Passo 1 — Faça uma faxina nas fontes que você realmente usa
Esse é o passo que mais economiza! Muita gente carrega 4, 5, 6 variações de fonte (light, regular, medium, bold, itálico...) mas usa só 2 delas de verdade no site.
- Liste quais fontes e quais pesos (espessuras) aparecem de fato no seu site.
- Remova do código tudo que não está sendo usado.
- Tente ficar com no máximo 2 famílias de fontes e 2 a 3 pesos de cada uma. Isso já resolve boa parte do problema.
Passo 2 — Prefira o formato WOFF2
Existem vários formatos de arquivo de fonte (TTF, OTF, WOFF, WOFF2). O WOFF2 é o mais moderno e o mais leve — costuma ser bem menor que os outros formatos, mantendo a mesma qualidade visual. Se você (ou quem cuida do seu site) está escolhendo fontes para hospedar, dê preferência sempre ao WOFF2.
Passo 3 — Use "font-display: swap" no CSS
Esse é um truque técnico simples, mas poderoso. Quando o navegador ainda não terminou de baixar a fonte personalizada, ele pode "travar" o texto invisível até a fonte chegar — deixando a página com uma sensação de lentidão (isso é chamado de "flash de texto invisível").
Adicionando a propriedade font-display: swap na declaração da fonte no CSS, você diz ao navegador: "mostra o texto com uma fonte padrão enquanto a fonte bonita não chega, e troca assim que estiver pronta". O visitante já começa a ler o conteúdo na hora, sem esperar.
@font-face {
font-family: "SuaFonte";
src: url("suafonte.woff2") format("woff2");
font-display: swap;
}
Se você usa Google Fonts, esse comportamento já pode ser ativado direto na própria URL de importação — dá uma olhada nas opções que o Google Fonts oferece ao gerar o link de incorporação.
Passo 4 — Hospede as fontes no seu próprio site (self-hosting)
Serviços como Google Fonts são ótimos, mas cada vez que o navegador do visitante busca a fonte em outro servidor (fora do seu domínio), ele gasta um tempinho extra só de "conversa" entre os servidores antes mesmo de começar a baixar o arquivo.
Uma alternativa é baixar os arquivos da fonte (em WOFF2) e subir para dentro da hospedagem do seu próprio site, servindo tudo do mesmo domínio. Isso costuma reduzir esse tempo de conexão extra. Você pode enviar os arquivos de fonte pelo Gerenciador de Arquivos do cPanel, dentro da pasta do seu site:
Dica da Sensei: se o seu site foi feito em WordPress ou outra plataforma com temas/plugins, verifique com quem desenvolveu o site se essa mudança é segura antes de mexer — trocar a origem das fontes pode exigir ajuste no tema.
Passo 5 — Use "preload" para as fontes mais importantes
Se existe uma fonte que aparece logo no topo da página (por exemplo, no título principal), você pode avisar o navegador para começar a baixar ela o quanto antes, com prioridade, usando a tag:
<link rel="preload" href="/fonts/suafonte.woff2" as="font" type="font/woff2" crossorigin>
Use esse recurso com moderação — só para 1 ou 2 fontes realmente essenciais para o primeiro impacto visual da página. Se usar em fontes demais, o efeito é o oposto: tudo disputa prioridade ao mesmo tempo.
Passo 6 — Avalie usar fontes do sistema quando fizer sentido
Nem todo elemento do site precisa de uma fonte personalizada. Para textos menores, como parágrafos longos ou rodapé, considerar uma "fonte do sistema" (as fontes que já vêm instaladas no computador/celular do visitante) pode reduzir bastante o peso da página — mantendo a fonte personalizada só onde ela realmente faz diferença visual, como títulos e logotipo.
Passo 7 — Habilite cache e compressão para os arquivos de fonte
Depois que o navegador do visitante baixa a fonte uma vez, o ideal é que ele não precise baixar de novo nas próximas visitas. Isso é feito através de regras de cache do navegador, que geralmente já vêm ativadas por padrão na hospedagem, mas também podem ser configuradas via arquivo .htaccess (em sites que usam Apache) ou pelas configurações do seu CMS/plataforma.
Se você tiver dúvida sobre como isso está configurado no seu site, nosso time de suporte pode te orientar.
Checklist rápido da Sensei ✅
- Usar no máximo 2 famílias de fontes, com poucos pesos cada;
- Preferir sempre o formato WOFF2;
- Aplicar font-display: swap;
- Avaliar hospedar as fontes no próprio domínio;
- Usar preload só nas fontes mais críticas;
- Considerar fontes do sistema para textos secundários;
- Garantir cache do navegador ativo para arquivos estáticos.
Se depois de aplicar essas dicas você ainda sentir que o site está lento, pode ser outro fator (imagens pesadas, muitos plugins, etc). Nesses casos, fale com nosso suporte pelo painel.gehost.com.br — a gente adora ajudar a deixar seu site rapidinho! 🚀
Com carinho,
Sensei GeHost 🌸
