Passou o seu site pelo GTmetrix e viu erros do Google Fonts? Não é o único. Os pedidos externos a fonts.googleapis.com atrasam o carregamento, e plugins de cache como o WP Rocket ou o WP Fastest Cache não conseguem comprimir ativos alojados no servidor de outra pessoa.

Desde 2022, há outra razão: um tribunal alemão decidiu que o carregamento dinâmico do Google Fonts viola o RGPD, porque os endereços IP dos visitantes são transmitidos para servidores da Google nos EUA sem consentimento. Alojar as fontes localmente resolve três problemas de uma vez: desempenho no GTmetrix, conformidade com o RGPD e controlo total sobre a cache.

Abaixo encontra um guia passo a passo. Desde escolher uma fonte no Google Fonts até obter um relatório limpo no GTmetrix, sem erros de recursos externos.

💡 Resumo rápido:

• Transfira os pesos de fonte de que precisa do Google Fonts
• Converta.ttf para WOFF2 usando o Transfonter ou o google-webfonts-helper
• Carregue os ficheiros para /wp-content/uploads/fonts/ via FTP
• Adicione as regras @font-face ao CSS do seu tema e verifique a renderização
• Volte a testar o seu site no GTmetrix; os erros do Google Fonts devem ter desaparecido

Por que razão deve alojar as fontes localmente

Quando um browser carrega uma página, vai a fonts.googleapis.com, obtém o CSS e depois vai buscar os ficheiros de fonte reais a fonts.gstatic.com. São, no mínimo, duas pesquisas de DNS externas e duas sessões HTTP sobre as quais não tem qualquer controlo. Os plugins de cache são impotentes aqui: não pode comprimir nem adiar o carregamento de um recurso externo.

O alojamento local muda o cenário. Os ficheiros de fonte ficam no seu servidor, no mesmo domínio, na mesma CDN, com as mesmas regras de cache. O browser não vai a lado nenhum externo, e o GTmetrix e o PageSpeed Insights deixam de se queixar de recursos de terceiros.

E sim, o RGPD. Em janeiro de 2022, o Tribunal Regional de Munique decidiu que o carregamento dinâmico do Google Fonts sem o consentimento do utilizador viola o RGPD. Uma onda de processos judiciais varreu a Europa, e os proprietários de sites começaram a mudar para o alojamento local em massa. Alojar as fontes você mesmo é a solução mais fiável.

Passo 1. Escolha uma fonte no Google Fonts

Aceda ao Google Fonts e encontre a fonte de que precisa. Neste guia, estou a usar a Roboto, uma das fontes web mais populares, com suporte a cirílico.

Duas regras para se manter leve:

• Pesos mínimos. Cada peso (regular, negrito, itálico) é um ficheiro separado e um pedido separado. Se o seu design usar apenas regular e negrito, desmarque os restantes.
• Mínimo de fontes. Limite-se a uma ou duas fontes por site. Uma terceira já é um exagero para o desempenho, por mais bonita que pareça.

Escolhi Roboto Regular (400) e Roboto Bold (700). Só isso.

Passo 2. Transfira a fonte

Na página da fonte, clique no botão «Download family». A Google irá empacotar todos os pesos num arquivo ZIP. A seleção de pesos não importa nesta fase; o arquivo contém a família completa de qualquer forma. Filtramos mais tarde.

Descomprima o arquivo. Precisamos de Roboto-Regular.ttf e Roboto-Bold.ttf.

Passo 3. Converta as fontes para formatos web

Os browsers não usam.ttf diretamente. Precisa dos formatos WOFF e WOFF2; são comprimidos e carregam mais rápido. Existem duas ferramentas, ambas gratuitas.

Transfonter é um clássico: aceda a transfonter.org, clique em «Add fonts» e carregue os seus ficheiros.ttf.

Deixe as definições nos valores predefinidos; WOFF e WOFF2 cobrem todos os navegadores modernos. O EOT (para o antigo Internet Explorer) não é necessário em 2026. Clique em «Convert».

O Google-webfonts-helper é uma opção mais moderna especificamente para Google Fonts. O serviço em gwfh.mranftl.com gera tanto ficheiros WOFF2 como CSS pronto a usar com @font-face. Não é necessário carregar fontes para um servidor de terceiros; tudo acontece localmente no seu navegador. Para fontes licenciadas e tipografias de marca, isto é relevante.

Qual a ferramenta a escolher? O Transfonter é mais simples para uma tarefa pontual. O Google-webfonts-helper é mais conveniente se mudar de fontes com frequência ou trabalhar com tipografias comerciais que prefere não enviar para servidores externos.

Passo 4. Carregar as web fonts para o seu servidor

Após a conversão, descarregue o ZIP. Dentro encontrará ficheiros.woff e.woff2 para cada peso. Para Roboto Regular e Bold, obtém 4 ficheiros:

Carregue-os via FTP ou através do gestor de ficheiros do seu alojamento para /wp-content/uploads/fonts/. O caminho /wp-content/uploads/ foi escolhido deliberadamente: as atualizações do core e do tema não lhe tocam, ao contrário da pasta do tema.

Após o carregamento, verifique abrindo um link direto para o ficheiro no seu navegador:

https://your-site.com/wp-content/uploads/fonts/Roboto-Regular.woff2

O navegador deverá começar a descarregar. Se não, verifique as permissões da pasta (devem ser 755) e o próprio caminho.

Passo 5. Adicionar @font-face ao seu CSS

O arquivo ZIP do Transfonter inclui um ficheiro stylesheet.css, um modelo pronto a usar para ligar a fonte. Abra-o e copie o conteúdo.

Cole o código no topo do ficheiro style.css do seu tema ativo (ou custom.css se o seu tema o suportar). Use caminhos para ficheiros no seu servidor ativo, não os do arquivo. Substitua os URLs relativos por absolutos:

Código original do stylesheet.css:

1
src: url('Roboto-Bold.woff2') format('woff2'),
2
     url('Roboto-Bold.woff') format('woff');

Altere para:

1
src: url('https://your-site.com/wp-content/uploads/fonts/Roboto-Bold.woff2') format('woff2'),
2
     url('https://your-site.com/wp-content/uploads/fonts/Roboto-Bold.woff') format('woff');

Substitua your-site.com pelo seu domínio. Repita para cada peso.

Para facilitar a utilização da fonte na sua marcação, adicione classes de wrapper abaixo:

1
.roboto_font {
2
  font-family: "Roboto", "Arial", sans-serif;
3
}
4
 
5
.roboto_bold_font {
6
  font-family: "Roboto", "Arial", sans-serif;
7
  font-weight: bold;
8
}

Agora qualquer elemento com a classe roboto_font ou roboto_bold_font será exibido em Roboto.

Passo 6. Verificar a renderização

Crie uma página de teste (ou abra uma já existente em modo rascunho) e cole este HTML no editor de texto:

1
<h2>Default theme font</h2>
2
<h2 class="roboto_font">Roboto Regular — custom font</h2>
3
<h2 class="roboto_bold_font">Roboto Bold — bold weight</h2>

Abra a pré-visualização. O primeiro título usa a fonte predefinida do tema; o segundo e o terceiro usam Roboto.

Se a fonte não estiver a carregar, abra a consola do navegador (F12 → Rede) e verifique se os ficheiros WOFF2 estão a ser carregados a partir do seu domínio, e não de fonts.gstatic.com. O código de resposta deve ser 200 e o tipo deve ser font/woff2.

Passo 7. Tornar a fonte predefinida

Para aplicar a Roboto em todo o site sem adicionar classes a cada título, adicione isto ao style.css:

1
body {
2
  font-family: "Roboto", "Arial", sans-serif;
3
}

Atenção: se o seu tema já usar uma fonte personalizada, localize as linhas font-family no style.css e substitua-as. Simplesmente adicionar uma regra body por cima de uma já existente cria um conflito. Certifique-se de que as declarações antigas são removidas ou comentadas.

Passo 8. Configurar uma pilha de fontes de recurso

As Google Fonts não são fontes do sistema. Se o navegador não conseguir carregá-las (visitante offline, bloqueador de anúncios, falha temporária), a página ficará sem texto. A solução é uma pilha de fontes.

Errado:

1
font-family: 'Roboto';

Correto, com fontes de recurso:

1
font-family: 'Roboto', Arial, sans-serif;

O navegador tenta a Roboto. Se falhar, recorre à Arial. Não há Arial? Usa a sans-serif do sistema. A página fica sempre legível, mesmo que a fonte personalizada não carregue.

Passo 9. Testar novamente o site no GTmetrix

Execute o GTmetrix novamente. A secção "Waterfall" já não deve mostrar pedidos para fonts.googleapis.com ou fonts.gstatic.com. O erro "Serve static assets with an efficient cache policy" para fontes também desaparece, porque esses recursos estão agora no seu servidor e são armazenados em cache de acordo com as suas regras.

Se persistirem erros, verifique o separador Waterfall. Um tema ou plugin (por exemplo, o Elementor) pode ainda estar a ir buscar fontes à CDN da Google. A próxima secção vai ajudar.

Alternativa para os mais preguiçosos: o plugin Local Google Fonts

Se não quiser lidar com FTP e CSS, existe o plugin Local Google Fonts. Ele encontra automaticamente todas as Google Fonts usadas pelo seu tema e plugins, descarrega-as e serve-as a partir do seu servidor.

Vantagens: instalar, ativar, esquecer. Desvantagens: só funciona com Google Fonts (não com outras fontes externas) e não oferece um controlo refinado sobre os formatos. Para a maioria dos sites em WordPress, é mais do que suficiente.

Vídeo útil sobre o tema

Em inglês, com uma demonstração visual de cada passo, desde a escolha da fonte até ao CSS final:

⁉️🤔 Perguntas frequentes

O auto-hospedagem de fontes é obrigatório em 2026?

Do ponto de vista legal, sim, se tiver visitantes da UE. O tribunal de Munique criou um precedente em 2022 e, desde então, dezenas de tribunais alemães confirmaram: carregar dinamicamente o Google Fonts sem consentimento = violação do RGPD. Do ponto de vista do desempenho, também sim: duas pesquisas de DNS extra e um recurso externo não armazenável em cache não tornam o seu site mais rápido. O auto-hospedagem de fontes resolve ambos os problemas de uma só vez. O plugin Local Google Fonts demora 5 minutos; o método manual com o Transfonter demora 15. Escolha com base na sua disponibilidade para usar FTP.

Google-webfonts-helper ou Transfonter: qual é melhor?

Para uma ligação única de uma única fonte, quase não há diferença. O Transfonter é mais simples: carregue o.ttf, obtenha WOFF2 e CSS. O Google-webfonts-helper é mais conveniente quando muda de fontes com frequência: não carrega ficheiros para um servidor de terceiros e gera imediatamente @font-face pronto a usar com caminhos corretos. Para fontes com licença comercial, apenas o google-webfonts-helper.

E se as fontes não aparecerem após o carregamento local?

Três causas típicas. Primeira, caminho errado em url(): verifique se o link abre num navegador e devolve um ficheiro, não um 404. Segunda, CORS: se as fontes carregarem a partir de uma CDN ou subdomínio, o servidor deve devolver o cabeçalho Access-Control-Allow-Origin. Terceira, conflito com o tema: abra as DevTools (F12 → Computed), encontre um elemento com a sua fonte e veja qual font-family está realmente a ser aplicada. Muitas vezes, o tema substitui-a mais abaixo na cascata.

Posso alojar fontes numa CDN em vez do meu próprio servidor?

Sim, mas a CDN tem de ser sua. O princípio fundamental é que as fontes devem ser servidas a partir do mesmo domínio (ou subdomínio) do seu site, sem pedidos entre domínios para servidores de terceiros. Assim, a cache funciona e o RGPD não é violado.

Como verifico se as fontes estão realmente a carregar localmente?

Abra DevTools → Network → separador Font. Atualize a página. Todos os pedidos de fontes devem ir para o seu domínio. Se vir fonts.googleapis.com ou fonts.gstatic.com, o carregamento externo permanece algures. Muito provavelmente, um tema ou plugin ainda o está a usar. Verifique as configurações ou instale o Local Google Fonts.

O que escolher: carregamento manual ou plugin

Se leu até aqui, provavelmente preocupa-se com o desempenho do seu site. E essa é a atitude correta. A diferença entre «parece rápido» e «GTmetrix Grau A» resume-se muitas vezes a pequenos detalhes como fontes externas.

Para resultados rápidos, instale o Local Google Fonts. Cinco minutos e os pedidos externos ao Google desaparecem.

Para controlo total sobre formatos, cache e pilhas de fallback, opte pelo método manual com o Transfonter ou o google-webfonts-helper. Os mesmos 15 minutos, mas conhece cada ficheiro no seu servidor.

De qualquer forma, faça um teste GTmetrix antes e depois. As capturas de ecrã do «antes» e «depois» são a melhor forma de confirmar que não fez tudo isto para nada.