Quando seu site WordPress carrega o Google Fonts a partir de fonts.googleapis.com, o navegador de cada visitante envia uma requisição aos servidores do Google. Essa requisição inclui o endereço IP do visitante, o user agent, a URL de referência e outros metadados. O Google recebe esses dados a cada carregamento de página, criando uma preocupação significativa de privacidade sob a legislação europeia de proteção de dados.
Por que o Google Fonts é um problema de GDPR
Em janeiro de 2022, um tribunal alemão (LG Munique, processo 3 O 17493/20) decidiu que incorporar o Google Fonts pelo link externo padrão constitui uma violação do GDPR. O tribunal entendeu que transmitir o endereço IP do visitante ao Google sem consentimento prévio viola o Artigo 6(1) do GDPR, porque o operador do site não tem interesse legítimo que prevaleça sobre o direito do usuário à proteção de dados. O operador do site foi condenado a pagar indenização ao visitante afetado.
Essa decisão estabeleceu um precedente claro em toda a União Europeia. Desde então, vários escritórios de advocacia enviaram notificações em massa a operadores de sites que ainda carregam o Google Fonts externamente. A correção é simples: hospede os arquivos de fontes em seu próprio servidor para que nenhum dado seja transmitido ao Google. Essa abordagem é totalmente compatível com o GDPR, elimina o risco jurídico e, frequentemente, também melhora a velocidade de carregamento.
Como baixar o Google Fonts para auto-hospedagem
A maneira mais fácil de obter os arquivos de fonte corretos com o CSS adequado é a ferramenta Google Webfonts Helper de Mario Ranftl. Veja como usá-la:
- Abra o Google Webfonts Helper e busque a fonte de que precisa (por exemplo, "Open Sans", "Roboto", "Lato").
- Selecione os conjuntos de caracteres necessários. Para a maioria dos sites europeus, "latin" e "latin-ext" são suficientes. Adicione "cyrillic" ou "greek" apenas se seu conteúdo realmente utiliza esses alfabetos.
- Escolha os pesos e estilos de fonte que você usa em seu site. Seleções comuns são 400 (regular), 400 itálico, 700 (bold) e 700 itálico. Evite selecionar pesos que você não utiliza, pois cada um aumenta o tamanho do arquivo.
- A ferramenta gera regras CSS
@font-faceprontas para uso. Copie-as. Você pode personalizar o prefixo do caminho dos arquivos para corresponder à estrutura de diretórios do seu servidor. - Baixe o arquivo zip contendo todos os arquivos de fonte selecionados em formatos modernos (woff2 e woff).
Auto-hospedagem manual passo a passo
Passo 1: Enviar os arquivos de fonte
Crie um diretório fonts dentro da pasta do seu tema ou tema filho e envie os arquivos de fonte baixados para lá:
/wp-content/themes/seu-tema/fonts/
open-sans-v40-latin-regular.woff2
open-sans-v40-latin-regular.woff
open-sans-v40-latin-700.woff2
open-sans-v40-latin-700.woffSe você usa um tema filho, coloque as fontes no diretório do tema filho para que sobrevivam às atualizações do tema pai.
Passo 2: Adicionar o CSS @font-face
Adicione o CSS gerado pelo Google Webfonts Helper à folha de estilo do seu tema ou a um arquivo CSS personalizado. Certifique-se de definir font-display: swap para que o texto permaneça visível enquanto as fontes carregam:
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'),
url('../fonts/open-sans-v40-latin-regular.woff') format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/open-sans-v40-latin-700.woff2') format('woff2'),
url('../fonts/open-sans-v40-latin-700.woff') format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('../fonts/open-sans-v40-latin-italic.woff2') format('woff2'),
url('../fonts/open-sans-v40-latin-italic.woff') format('woff');
}Passo 3: Remover a referência externa ao Google Fonts
Você precisa impedir que o seu tema carregue fontes de fonts.googleapis.com. Isso é tipicamente feito removendo o handle da folha de estilo da fila. O nome do handle varia conforme o tema, então pode ser necessário inspecionar o código-fonte HTML para encontrá-lo:
add_action('wp_enqueue_scripts', function() {
// Common handle names used by themes
wp_dequeue_style('google-fonts');
wp_deregister_style('google-fonts');
// Some themes use different handles
wp_dequeue_style('flavor-google-fonts');
wp_deregister_style('flavor-google-fonts');
// Divi theme
wp_dequeue_style('divi-fonts');
wp_deregister_style('divi-fonts');
}, 100);A prioridade 100 garante que esse código execute depois que o tema enfileirou seus estilos. Se o tema usar um nome de handle diferente, verifique o código-fonte da página por uma tag <link> contendo fonts.googleapis.com e anote o atributo id (remova o sufixo -css para obter o nome do handle).
Alguns temas inserem o link do Google Fonts diretamente no cabeçalho do template em vez de usar wp_enqueue_style. Nesse caso, pode ser necessário editar o template do cabeçalho ou usar um tema filho para sobrescrevê-lo.
Auto-hospedagem com um plugin
Se você prefere não lidar com arquivos de fonte e CSS manualmente, plugins podem automatizar todo o processo:
- OMGF (Optimize My Google Fonts): detecta automaticamente o Google Fonts carregado em seu site, baixa os arquivos de fonte para o seu servidor, gera CSS
@font-facelocal e remove as referências externas ao Google Fonts. Também faz o pré-carregamento de fontes para melhor desempenho e cuida do cache busting. É a opção mais popular para essa tarefa específica. - Asset CleanUp (Pro): além da otimização geral de assets, pode detectar e hospedar localmente o Google Fonts. Oferece mais controle sobre quais páginas carregam quais fontes, útil para sites em que diferentes seções usam tipografias diferentes.
- Perfmatters: inclui um recurso de Google Fonts local junto com outras ferramentas de otimização de desempenho. Boa escolha se você quer um único plugin para várias melhorias de desempenho.
Entendendo font-display: swap
A propriedade font-display: swap em suas regras @font-face é importante para a experiência do usuário e para os Core Web Vitals. Sem ela, os navegadores podem ocultar o texto até que a fonte termine de carregar (conhecido como FOIT, ou Flash of Invisible Text). Com swap, o navegador exibe imediatamente o texto usando uma fonte de sistema alternativa e depois a substitui assim que a fonte personalizada é carregada. Isso evita que mudanças de layout sejam contabilizadas no seu Cumulative Layout Shift (CLS) e garante que o conteúdo seja legível mesmo em conexões lentas.
Subset de fontes para melhor desempenho
Se quiser ir além na otimização, considere fazer subset das suas fontes. Um arquivo de fonte completo "Latin Extended" pode incluir caracteres para idiomas que você nunca utiliza no seu site. Ferramentas como fonttools (pyftsubset) ou Everything Fonts Subsetter podem remover caracteres não utilizados, reduzindo significativamente o tamanho do arquivo. Por exemplo, um arquivo de fonte que cobre todo o Latin Extended pode ter 25KB, mas um subset contendo apenas os caracteres usados em inglês e alemão pode ficar abaixo de 15KB. Para a maioria dos sites, os conjuntos de caracteres oferecidos pelo Google Webfonts Helper já são um subset razoável, então essa etapa é opcional.
Verificando que nenhuma requisição externa de fonte permanece
Após fazer suas alterações, é importante verificar que nenhuma requisição a fonts.googleapis.com ou fonts.gstatic.com permanece. Abra as Ferramentas de Desenvolvedor do navegador (F12), vá até a aba Rede, recarregue a página e filtre por "font" ou pesquise por "googleapis". Verifique várias páginas, não apenas a página inicial, porque alguns temas carregam fontes diferentes em diferentes templates de página.
Verifique também se há Google Fonts carregados por plugins. Alguns construtores de páginas, plugins de slider ou plugins de formulário carregam suas próprias fontes do Google independentemente do tema. Pode ser necessário verificar nas configurações de cada plugin uma opção de "desativar Google Fonts" ou "carregar fontes localmente".
Verifique com o InspectWP
Execute uma nova varredura do InspectWP após fazer suas alterações. A seção GDPR do seu relatório mostrará se ainda há requisições aos servidores do Google Fonts. O InspectWP verifica conexões tanto com fonts.googleapis.com (o CSS) quanto com fonts.gstatic.com (os próprios arquivos de fonte). Se todas as fontes estão auto-hospedadas corretamente, nenhum desses domínios deve aparecer na lista de recursos externos.