Integrar o Google Fonts localmente - alternativa compatível com o RGPD para maior proteção de dados

Cada vez mais operadores de sítios Web querem Integrar o Google Fonts localmentepara proteger melhor os dados pessoais dos seus visitantes. As fontes integradas dinamicamente violam o RGPD sem consentimento explícito e apresentam um risco acrescido de avisos.

Pontos centrais

• Proteção de dadosAs fontes dinâmicas do Google transmitem endereços IP para os servidores do Google - uma violação do RGPD.
• Segurança jurídicaA integração local reduz o risco de advertências e coimas.
• Desempenho do sítio WebOs servidores próprios fornecem frequentemente fontes mais rapidamente do que as fontes externas.
• PluginsFerramentas como o OMGF simplificam consideravelmente a integração local.
• Personalização do temaAs fontes devem ser especificamente substituídas no CSS e todas as ligações externas devem ser removidas.

Porque é que a integração dinâmica é problemática

Muitos temas e plug-ins utilizam por defeito as fontes do Google através da API do Google. Isto significa que o endereço IP dos visitantes é transmitido para servidores nos EUA sempre que uma página é acedida. De acordo com um acórdão do Tribunal Regional de Munique, isto constitui uma violação da proteção de dados sem consentimento. Além disso, não existe qualquer possibilidade de os utilizadores se oporem especificamente a esta transmissão. Isto aumenta significativamente o risco de multas substanciais e advertências dispendiosas.

O seguinte aplica-se a todos os tipos de serviços de terceiros incorporados: Assim que os dados pessoais são transmitidos para servidores localizados fora da UE sem consentimento, isso viola o RGPD. Mesmo que a Google afirme que as fontes não recolhem quaisquer dados pessoais, o endereço IP, por si só, afecta claramente a proteção de dados.

Como funciona a integração local do Google Fonts

A integração local significa que guarda os tipos de letra no seu próprio servidor. Isto poupa ao seu navegador Web o pedido do servidor ao Google e vai buscar os ficheiros diretamente ao seu domínio. É assim que funciona, passo a passo:

1. Aberto fonts.google.com e selecionar as fontes e variantes pretendidas.
2. Descarregue os tipos de letra e converta-os para o formato Web .woff2 - por exemplo, com google-webfonts-helper.
3. Carregue os ficheiros .woff2 por FTP ou através do seu backend para uma subpasta como /wp-content/fonts/.
4. Completar o @font-face-no CSS do seu sítio Web e introduza o caminho do tipo de letra.

Um exemplo do código CSS:

@font-face {
  font-family: 'OpenSans';
  src: url('/wp-content/fonts/OpenSans-Regular.woff2') format('woff2');
  peso da fonte: 400;
  estilo da fonte: normal;
}

Em seguida, utilize-o na folha de estilos do seu sítio Web: família de caracteres: 'OpenSans', Arial, sans-serif;

Integrar o Google Fonts localmente no WordPress

O WordPress é particularmente suscetível a integrações indesejadas do Google Fonts através de temas e plug-ins. Uma fonte frequentemente negligenciada: widgets pré-instalados ou construtores como Elementor, Divi ou WPBakery. Por isso, vale a pena efetuar uma verificação minuciosa com ferramentas como o "Google Fonts Checker". Ligações visíveis a tipos de letra.googleapis.com ou fontes.gstatic.com deve ser completamente removido.

É melhor criar um tema filho antes de fazer alterações nos tipos de letra. Isto garantirá que as suas modificações são mantidas mesmo após actualizações do tema. Carregue os seus tipos de letra para a pasta do seu tema secundário e ligue o local de armazenamento no CSS. Em alternativa, também pode trabalhar com um plugin.

Plugins úteis para integração local

Os plugins tornam as coisas muito mais fáceis, especialmente para os utilizadores menos técnicos. Algumas ferramentas substituem automaticamente as fontes externas por versões locais:

• OMGFO plugin reconhece automaticamente as fontes do Google utilizadas, guarda-as localmente e substitui as chamadas externas. A versão Pro paga oferece cache alargada e suporte para tipos de letra personalizados.
• Otimização automáticaPara além das funções de cache, o Autoptimise também permite controlar a incorporação de tipos de letra. Particularmente prático para instalações Elementor ou Divi.
• Plugin de fontes ProCompatível com quase todos os construtores de páginas comuns. Funcionamento intuitivo através do menu WordPress.

Integrar o Google Fonts localmente com os construtores de páginas

Utilizador Divi pode desativar o carregamento de fontes externas nas definições do tema. As fontes locais são então integradas usando o Divi Customiser ou adicionando-as ao tema filho.

Elementor oferece a opção de carregar e utilizar os seus próprios tipos de letra na área de tipos de letra personalizados. O recarregamento automático deve ser primeiro desativado utilizando um fragmento de código:

add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

Em WPBakery a integração local só funcionava manualmente através de personalizações diretas de CSS. As fontes devem ser colocadas no tema ou tema filho e referenciadas explicitamente.

Gestão de vários tipos de letra

Em muitos projectos, não é utilizado apenas um tipo de letra, mas vários estilos de letra ou mesmo famílias de letras diferentes. Isto pode levar a uma gestão confusa dos tipos de letra. Para trabalhar corretamente, deve primeiro tomar nota ou verificar a folha de estilos para ver que tipos de letra são utilizados e em que locais.

Especialmente se utilizar um construtor de páginas como o Elementor ou o Divi, diferentes módulos podem carregar diferentes tipos de letra. Por exemplo, os títulos podem ser criados em "Open Sans" e os textos do corpo em "Roboto". Existem também estilos de letra em negrito ou itálico. É preferível criar uma lista na qual anota sistematicamente os tipos de letra e as suas variantes. Isto evitará que integre localmente apenas alguns dos tipos de letra necessários. Os estilos de letra em falta causam frequentemente erros de visualização ou fazem com que os estilos individuais continuem a ser recuperados dos servidores do Google.

Ao descarregar com google-webfonts-helper pode normalmente selecionar imediatamente os estilos de letra e o suporte linguístico de que necessita. Isto minimiza o tamanho do ficheiro, mas também evita pedidos indesejados a servidores externos.

Erros típicos e como evitá-los

Após as actualizações, os temas podem voltar a ativar tipos de letra externos. Por conseguinte, verifique regularmente através do DevTools se as fontes estão a ser carregadas a partir do Google sem autorização. Para multisites, deve verificar cada página individualmente - as definições não se aplicam globalmente. Os plug-ins também podem reintegrar fontes, mesmo que o tema já tenha sido personalizado.

Utilize também um kit de ferramentas de rastreio ou extensões do navegador para verificar. Podem ocorrer diferenças visuais se faltarem alguns estilos de letra (itálico, negrito). Certifique-se de que seleciona todas as variantes de tipo de letra utilizadas durante o descarregamento. Outro erro é esquecer-se de pré-carregar os tipos de letra. Se fornecer localmente ficheiros de tipos de letra maiores, um pré-carregamento no código do cabeçalho pode minimizar o tempo de processamento.

Considerações importantes antes da entrada em funcionamento

Antes de colocar o seu projeto em funcionamento ou de ativar as alterações finais a uma página existente, recomendamos uma fase de teste num ambiente de preparação ou de desenvolvimento. Aí pode verificar o seguinte:

• Renderização suaveTodos os tipos de letra funcionam, os blocos de texto são apresentados corretamente?
• Estilos de letra em faltaTeste explícito de negrito, itálico e outras variantes no frontend.
• Componentes CSS removidosPor vezes, ainda existe código desatualizado no tema. Certifique-se de que não existem instruções @import antigas em fonts.googleapis.com.
• Caching e CDNSe estiver a utilizar um CDN ou tiver ativado o caching agressivo, deve garantir que as alterações de tipo de letra também são entregues. Se necessário, limpe a cache para evitar uma versão desactualizada.
• Cópia de segurança antes da transiçãoCrie uma cópia de segurança completa do seu sítio Web e da base de dados antes de substituir os tipos de letra, para que possa regressar rapidamente ao estado anterior, se necessário.

Esta verificação minuciosa reduz as falhas e garante que os seus visitantes vejam um sítio sem erros e em conformidade com a proteção de dados. A transparência é particularmente importante quando várias pessoas estão a trabalhar num sítio Web: documente as medidas que tomou e informe a sua equipa sobre as novas @font-face-regras ou o plugin utilizado.

Benefícios de desempenho através da integração local

As fontes locais não só reduzem os riscos de proteção de dados, como também melhoram frequentemente o tempo de carregamento do seu sítio Web. Como não há nenhum pedido a servidores externos, o conteúdo da fonte é entregue diretamente a partir do servidor de alojamento. Com hosters rápidos como o webhoster.de, isto traz benefícios mensuráveis. O armazenamento em cache também pode ser controlado de forma mais eficiente porque o acesso e a versão da fonte estão sob o seu próprio controlo.

Uma comparação simples mostra as diferenças entre a integração dinâmica e a integração local:

Caraterística	Google Fonts (dinâmico)	Fontes locais do Google
Proteção de dados	Crítico (transmissão IP)	Em conformidade com o RGPD
Tempo de carregamento	Mais lento devido a pedidos externos	Mais rápido com um bom alojamento
Atualizar a segurança	Automatizado através do Google	Manutenção manual necessária
Risco de alerta	Elevado	Muito baixo

FAQ: Perguntas frequentes sobre a integração local do Google Fonts

1. o que acontece com os browsers que não suportam .woff2?
A maioria dos browsers modernos suporta o formato de tipo de letra da Web .woff2. Para browsers muito antigos que não conseguem ler este formato, também pode utilizar .woff ou outras variantes. No entanto, muitas vezes isto já não é necessário para os grupos-alvo actuais, uma vez que a cobertura de mercado dos browsers modernos é elevada.

2. Os utilizadores podem queixar-se se as fontes forem incorporadas localmente?
Pelo contrário. A integração local é particularmente desejável do ponto de vista da proteção de dados e normalmente passa despercebida aos visitantes. De facto, pode haver um feedback positivo se o sítio carregar mais rapidamente e tratar os dados do utilizador de forma mais transparente.

3. qual é a dimensão do ganho de desempenho?
Isto depende do alojamento e do tamanho total da página. Para páginas com muitas variantes de tipos de letra ou com vários tipos de letra, a poupança de pedidos externos pode ser claramente percetível. As fontes locais têm um efeito particularmente positivo nos visitantes com acesso lento à Internet ou em regiões com ligações de rede menos estáveis.

4. Tenho de atualizar os tipos de letra após um ano?
O próprio Google Fonts é ocasionalmente optimizado ou expandido para incluir novos estilos de letra. Em princípio, as versões existentes permanecem funcionais, pelo que não é necessária uma atualização obrigatória. No entanto, se quiser manter-se sempre atualizado (por exemplo, quando são adicionados novos glifos), pode descarregar e substituir os ficheiros de vez em quando.

5 E se o fabricante do meu tema exigir tipos de letra externos?
Vale a pena perguntar à equipa de apoio do fornecedor do tema sobre este assunto. Muitas vezes é possível desativar as fontes padrão ou substituí-las pelos seus próprios ficheiros integrados localmente. Alguns temas premium já oferecem opções para isso nas definições.

O que deve constar da política de privacidade?

Deve também incluir uma nota na política de privacidade para integração local. Um pequeno parágrafo é muitas vezes suficiente, por exemplo:

"Utilizamos fontes locais para conceber o nosso sítio Web. Não há transferência de dados para servidores externos."

Desta forma, deixa claro que a utilização está em conformidade com o RGPD e dá aos visitantes transparência sobre os processos técnicos no seu sítio. Aplicam-se regras semelhantes aos serviços de fontes utilizados externamente, como o Adobe Fonts, que também devem ser explicitamente mencionados e integrados localmente.

Melhores práticas para utilizadores avançados

Se já tratou da integração local do Google Fonts, pode fazer mais optimizações. Para além da integração simples através de @font-face, as fontes podem ser ainda mais optimizadas utilizando estratégias de corte de fontes ou de subconjuntos. Estas técnicas reduzem o tamanho do ficheiro de origem, incorporando apenas determinados conjuntos de caracteres (por exemplo, apenas caracteres latinos sem caracteres especiais).

Se o seu grupo-alvo for internacional, pode valer a pena dividir o seu sítio Web em vários ficheiros de tipos de letra, a fim de otimizar os tempos de carregamento para cada utilizador individual. Existe também a opção de utilizar apresentação da fonte: no CSS para definir a forma como o tipo de letra é apresentado durante o carregamento (por exemplo troca ou recuo) para que os utilizadores não tenham de esperar demasiado tempo pela apresentação final do tipo de letra.

Uma abordagem estratégica à configuração do servidor também é importante. Por exemplo, definir os cabeçalhos de cache corretos (por exemplo Controlo da cache e Expirações) para os seus tipos de letra, para que os browsers guardem os ficheiros em cache a longo prazo e não tenham de os recarregar sempre que uma página é chamada. Isto é particularmente útil se precisar do tipo de letra várias vezes no mesmo domínio:

ExpiresActive On
    ExpiresByType font/woff2 "acesso mais 1 ano"
    ExpiresByType font/woff "acesso mais 1 ano"

Com estas definições, o seu sítio terá um desempenho ainda melhor e as suas fontes permanecerão em conformidade com o RGPD.

Segurança adicional: registo e controlo

Alguns operadores documentam em pormenor a forma como os tipos de letra são integrados. Por exemplo, os conceitos internos de proteção de dados podem registar quais os tipos de letra utilizados, onde estão localizados no servidor e quando foram descarregados. Isto é particularmente importante para as grandes empresas ou agências que têm de prestar contas das suas medidas de proteção de dados aos clientes ou às autoridades.

Também pode executar o seu próprio projeto através de ferramentas como o "Google Fonts Checker" ou o DevTools em intervalos regulares - uma vez por trimestre, por exemplo. Isto assegurará que nenhum plug-in ou script recentemente instalado estabelece ligações externas ao Google. Esta é uma prática recomendada, especialmente para sítios Web maiores com muitos participantes.

Conclusão: Utilizar o Google Fonts com segurança

Quem Integrar o Google Fonts localmenteprotege os dados dos visitantes, optimiza a velocidade de carregamento e evita consequências legais. A mudança é relativamente simples com ferramentas como o OMGF ou através de personalização CSS. Recomendo uma combinação de utilização de plugins e afinação manual - isto cria uma integração de tipos de letra limpa e controlada. Se fizer verificações regulares, garantir actualizações e utilizar um suporte de alojamento adequado, estará do lado seguro em termos de proteção de dados.