Como Hospedar Fontes do Google Localmente no WordPress

Carregar fontes do Google a partir dos servidores do Google cria uma conexão de terceiros que transmite endereços IP dos visitantes. Para sites que atendem visitantes da UE, isso levanta preocupações relacionadas ao GDPR. A hospedagem local elimina completamente essa conexão, ao mesmo tempo que lhe dá controle sobre cache e entrega.

Este guia cobre três abordagens para hospedar fontes localmente no WordPress: a Biblioteca de Fontes nativa para temas em blocos, implementação manual para temas clássicos e uma breve nota sobre alternativas de plugins.

Por Que Hospedar Fontes do Google Localmente?

Quando visitantes carregam seu site, o navegador busca fontes de fonts.googleapis.com e fonts.gstatic.com. Cada solicitação envia o endereço IP deles para os servidores do Google.

A hospedagem local move os arquivos de fontes para seu servidor. Os benefícios incluem:

• Conformidade com privacidade: Nenhuma transferência de dados de terceiros para documentar ou justificar
• Controle de desempenho: Defina seus próprios cabeçalhos de cache e use pré-carregamento
• Confiabilidade: Nenhuma dependência de serviços externos

A diferença de desempenho entre a CDN do Google e uma configuração local bem configurada é tipicamente mínima. O principal motivador para a maioria dos sites é a conformidade com o GDPR, não a velocidade.

Temas em Blocos: Use a Biblioteca de Fontes Nativa

O WordPress 6.5+ inclui uma Biblioteca de Fontes que baixa e serve fontes localmente. Esta é a abordagem mais simples para temas em blocos.

Passos:

1. Navegue até Aparência → Editor
2. Abra Estilos (canto superior direito) → Tipografia
3. Clique em Gerenciar Fontes → Instalar Fontes
4. Busque sua fonte, selecione os pesos necessários e clique em Instalar

O WordPress baixa os arquivos WOFF2 para wp-content/fonts/ e os registra na configuração do seu tema. Nenhuma conexão externa ocorre após a instalação.

Limitações: Isso só funciona com temas em blocos. Temas clássicos requerem implementação manual.

Temas Clássicos: Implementação Manual

Para temas clássicos, você baixará as fontes e escreverá o CSS você mesmo.

Baixar e Converter Arquivos de Fontes

1. Visite Google Fonts, selecione sua fonte e baixe
2. Se o download incluir arquivos TTF, converta-os para WOFF2 usando google-webfonts-helper ou Transfonter
3. Faça upload dos arquivos para seu tema: wp-content/themes/seu-tema/fonts/

Registrar Fontes com CSS

Adicione isso ao style.css do seu tema ou a uma folha de estilos personalizada:

@font-face {
  font-family: 'Inter';
  src: url('./fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

Propriedades principais:

• font-display: swap: Mostra o texto de fallback imediatamente, depois troca quando a fonte carrega. Previne texto invisível.
• font-weight: 100 900: Para fontes variáveis, declara toda a faixa de peso em um arquivo.

Para fontes estáticas, crie regras @font-face separadas para cada peso que você usar.

Aplicar a Fonte

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

Sempre inclua fallbacks de fontes do sistema.

Desabilitar Carregamento Remoto

Verifique se nenhuma fonte remota está sendo carregada abrindo as DevTools (F12), indo para a aba Network, filtrando por Font e recarregando. Procure por solicitações para fonts.gstatic.com.

Se seu tema carregar fontes do Google remotamente, verifique suas configurações para uma opção de desabilitar. Caso contrário, você pode precisar remover a folha de estilos da fila no functions.php ou usar um plugin como Disable and Remove Google Fonts.

Alternativas de Plugins

Vários plugins automatizam a hospedagem local de fontes:

• OMGF (Optimize My Google Fonts): Detecta e baixa fontes automaticamente
• Local Google Fonts: Funcionalidade similar com suporte a subconjuntos
• WP Rocket: Inclui uma opção de um clique nas configurações de Mídia

Plugins funcionam bem quando temas ou construtores de páginas carregam fontes de maneiras difíceis de sobrescrever manualmente. Eles não são obrigatórios — os métodos acima funcionam sem eles.

Melhores Práticas

Prefira WOFF2: Oferece aproximadamente 30% melhor compressão que WOFF e tem mais de 97% de suporte dos navegadores. Pule formatos mais antigos a menos que precise de suporte ao IE11.

Use fontes variáveis quando disponíveis: Um arquivo cobre todos os pesos, reduzindo solicitações HTTP.

Pré-carregue com moderação: Apenas pré-carregue fontes usadas acima da dobra:

<link rel="preload" href="/fonts/inter-variable.woff2" as="font" type="font/woff2" crossorigin>

Inclua crossorigin condicionalmente: Adicione apenas se seu servidor enviar os cabeçalhos CORS apropriados.

Evite @import: Bloqueia a renderização. Use tags <link> ou @font-face em vez disso.

Conclusão

Para temas em blocos, a Biblioteca de Fontes do WordPress cuida de tudo — instale fontes através do editor e pronto. Para temas clássicos, baixe arquivos WOFF2, escreva regras @font-face e verifique se não restam conexões remotas.

A hospedagem local lhe dá controle total sobre a entrega de fontes e elimina transferências de dados de terceiros. A implementação leva minutos, e o resultado é um site mais limpo e mais consciente da privacidade.

Perguntas Frequentes

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.