Como Usar Google Fonts Offline no Seu Site para Melhorar o Desempenho
Olá, amigo(a) desenvolvedor(a) ou dono(a) de site! Seja bem-vindo(a) ao nosso guia de desempenho com um toque de sabedoria: como usar Google Fonts offline para deixar seu site mais rápido, seguro e independente da internet. 🌟
Quando você carrega fontes do Google diretamente da internet, seu site depende de uma conexão estável com o servidor do Google. Isso pode atrasar o carregamento, especialmente em regiões com conexão instável. A boa notícia? Você pode baixar as fontes e usá-las localmente — e isso muda tudo!
Dica Sensei: Usar fontes offline é uma das formas mais eficazes de melhorar o tempo de carregamento do seu site. É como ter um livro em casa em vez de pedir emprestado todo dia.
Passo a Passo: Como Baixar e Usar Google Fonts Offline
-
Escolha sua fonte no Google Fonts
Visite fonts.google.com e escolha a fonte que deseja usar no seu site (ex: Poppins, Open Sans, Montserrat).
-
Selecione os estilos e caracteres
Na página da fonte, clique em “Customize” e escolha os estilos que você vai usar (ex: Regular, Bold, Itálico). Também é importante marcar os caracteres que seu site precisa (ex: Latin, Latin Extended).
-
Baixe a fonte
Clique em “Download” no canto superior direito. Você receberá um arquivo compactado (ZIP) com todos os arquivos da fonte (TTF, WOFF, WOFF2, etc.).
-
Extraia os arquivos
Descompacte o ZIP em uma pasta no seu computador. Dentro, você verá arquivos como
Poppins-Regular.woff2,Poppins-Bold.ttf, etc. -
Envie os arquivos para o seu site
Use o Gerenciador de Arquivos do cPanel para enviar os arquivos da fonte para a pasta do seu site. Normalmente, isso é feito na pasta
public_htmlou em uma subpasta comofonts/.
Se você ainda não tem uma pasta para fontes, crie uma: clique com o botão direito na pasta
public_htmle escolha “Criar Pasta”. Nomeie comofonts. -
Crie um arquivo CSS com o @font-face
Abra um editor de texto (como o Bloco de Notas, VS Code, ou Sublime) e crie um arquivo chamado
fonts.css(ou qualquer nome que desejar).Adicione este código, ajustando os nomes dos arquivos conforme o que você baixou:
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Regular.woff2') format('woff2'), url('fonts/Poppins-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Bold.woff2') format('woff2'), url('fonts/Poppins-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }💡 Dica: Use
font-display: swap;para evitar que o texto fique em branco enquanto a fonte carrega. -
Carregue o CSS no seu site
Salve o arquivo
fonts.csse envie-o para o mesmo diretório do seu site (ex:public_htmlou dentro da pastacss/).Depois, no seu arquivo principal de CSS (ou no
<head>do HTML), adicione esta linha:<link rel="stylesheet" href="fonts.css"> -
Use a fonte no seu site
No seu CSS, agora você pode usar a fonte como se fosse qualquer outra:
body { font-family: 'Poppins', sans-serif; }Pronto! Agora seu site carrega a fonte localmente, sem depender do Google. 🚀
Benefícios de Usar Google Fonts Offline
- ⚡ Melhor performance: o site carrega mais rápido, sem esperar por servidores externos.
- 🔒 Mais segurança: evita dependência de terceiros (como o Google) e riscos de bloqueio ou falha.
- 🌍 Funciona em qualquer lugar: mesmo sem internet, o site mostra o texto com a fonte correta.
- 📊 Boas práticas de SEO e UX: motores de busca valorizam sites rápidos e responsivos.
Conclusão da Sensei: Usar fontes offline é um pequeno esforço que traz grandes ganhos. Você não precisa ser um expert — basta seguir os passos com calma. E lembre-se: o melhor site é aquele que carrega rápido, mesmo no celular mais antigo.
Se precisar de ajuda, é só chamar a nossa equipe de suporte — estamos aqui para te ajudar, como um bom amigo de tecnologia. 💙
