Google Fonts Local: tipos de letra alojados localmente e RGPD (dffontmanager)

O DF Font Manager aloja os seus tipos de letra Google Fonts diretamente no seu servidor PrestaShop: os seus visitantes nunca mais contactam os servidores da Google (conformidade RGPD), e muda a tipografia da sua loja por simples regras CSS, sem modificar um único ficheiro do tema. O módulo gere a importação a partir do catálogo Google Fonts, o subsetting automático por alfabeto, o pré-carregamento do ficheiro crítico, a estratégia font-display e o carregamento de tipos de letra próprios.

Instalação

1. No seu back-office PrestaShop, abra Módulos > Gestor de módulos.
2. Clique em Instalar um módulo e carregue o ficheiro dffontmanager.zip.
3. Aparece um separador Gestor de tipos de letra sob o menu Design: é aí que tudo se passa (o botão Configurar do módulo também redireciona para lá).

O módulo regista-se em três hooks (displayHeader, actionFrontControllerSetMedia, actionOutputHTMLBefore) e cria duas tabelas: os tipos de letra instalados e as regras de substituição. Os ficheiros de tipos de letra são guardados em modules/dffontmanager/views/fonts/ e a folha de estilos gerada em modules/dffontmanager/views/css/generated/: verifique que estas pastas têm permissão de escrita.

Definições gerais

• Ativar os tipos de letra alojados localmente: interruptor principal: carrega a folha de estilos gerada e as etiquetas de pré-carregamento no front-office.
• Remover as chamadas externas Google Fonts (RGPD): limpa o HTML renderizado da loja: todas as etiquetas link que apontam para fonts.googleapis.com ou fonts.gstatic.com (folhas de estilo, preconnect, pré-carregamentos) e os @import inline correspondentes são retirados antes do envio da página. É esta opção que garante que nenhum pedido parte para a Google, mesmo que o seu tema ou outro módulo o injete.
• Estratégia font-display: aplicada a todas as declarações @font-face geradas. swap (por defeito) mantém o texto visível durante o carregamento; block, fallback, optional e auto estão disponíveis para necessidades específicas.

Importar um tipo de letra Google Fonts

1. No painel Importar um tipo de letra Google, escreva pelo menos dois caracteres: o preenchimento automático percorre o catálogo Google Fonts completo, guardado em cache 7 dias no seu servidor (botão de atualização ao lado do campo).
2. Selecione uma família: as variantes disponíveis (espessuras 100 a 900, normal e itálico) e os alfabetos aparecem. Por defeito, as espessuras 400 e 700 e os subsets latin + latin-ext estão pré-marcados.
3. Clique em Importar localmente.

O módulo interroga então a API CSS da Google, descarrega os ficheiros woff2 oficiais correspondentes à sua seleção (um ficheiro por alfabeto e por variante), verifica a sua assinatura binária, arruma-os em views/fonts/nome-da-familia/ e regenera a folha de estilos. A página recarrega com a família visível na tabela dos tipos de letra instalados, com o seu peso total em disco.

O subsetting automático

A Google divide cada tipo de letra em ficheiros por alfabeto (latin, latin-ext, cirílico, grego, vietnamita, etc.). O módulo só descarrega os alfabetos marcados e conserva para cada ficheiro o seu unicode-range de origem na declaração @font-face. O navegador só pede portanto os intervalos de caracteres realmente apresentados na página: uma loja portuguesa típica serve 20 a 90 KB de tipos de letra em vez de várias centenas.

Reimportar ou modificar uma família

Para acrescentar uma espessura ou um alfabeto a uma família já instalada, refaça simplesmente a importação com a nova seleção: os antigos ficheiros da família são substituídos, as regras de substituição que a usam ficam intactas.

Carregar um tipo de letra próprio

O painel Carregamento de um tipo de letra personalizado aceita os formatos woff2 (recomendado), woff, ttf e otf. Indique o nome da família, a espessura e o estilo, e envie o ficheiro: um ficheiro por combinação espessura/estilo, fundidos automaticamente sob a mesma família. Cada ficheiro é validado pela sua assinatura binária (e não pela sua extensão), e depois integrado na folha gerada e disponível nas regras exatamente como um tipo de letra Google.

Gerir os tipos de letra instalados

A tabela dos tipos de letra instalados mostra para cada família: a fonte (google ou custom), as variantes, os subsets, o número de ficheiros e o seu peso em disco, e depois dois interruptores:

• Ativo: inclui ou exclui a família da folha de estilos gerada (os ficheiros ficam no disco).
• Pré-carregamento: ver a secção dedicada abaixo.

O botão de eliminação retira a família, os seus ficheiros em disco e todas as regras que a usam, e reconstrói depois a folha de estilos.

Regras de substituição

É aqui que aplica os seus tipos de letra sem tocar no tema. Cada regra associa um seletor CSS a um tipo de letra instalado, com quatro opções:

• Espessura: força um font-weight (deixe vazio para herdar do tema);
• Estilo: normal ou itálico (vazio para herdar);
• Pilha de recurso: famílias genéricas apresentadas se o tipo de letra ainda não estiver carregado: sans-serif, serif, monospace ou system-ui, sans-serif;
• !important: marcado por defeito, garante que a regra prevalece sobre os estilos do tema qualquer que seja a sua especificidade.

Exemplos de seletores correntes:

• body: toda a loja;
• h1, h2, h3, h4, h5, h6: todos os títulos;
• .btn, button: os botões;
• .product-title, .h3.product-title: os títulos de produtos das listagens (a adaptar ao seu tema).

Cada adição ou eliminação de regra reconstrói imediatamente a folha de estilos. A folha é carregada depois do CSS do tema: mesmo sem !important, as suas regras ganham a cascata em igualdade de especificidade.

Pré-carregamento: boas práticas

O interruptor Pré-carregamento de uma família emite no topo da página uma etiqueta link rel=preload as=font crossorigin para o seu ficheiro crítico, escolhido automaticamente: woff2, estilo normal, alfabeto latin, espessura mais próxima de 400. O navegador descarrega assim o tipo de letra em paralelo com o CSS, antes mesmo de descobrir o seu uso: o texto definitivo aparece mais cedo.

Funcionamento técnico

• A folha gerada fonts-v{carimbo}.css contém todas as declarações @font-face (com font-display e unicode-range) seguidas das regras de substituição. Cada reconstrução produz um novo nome de ficheiro (cache-busting automático) e purga as versões antigas.
• É registada via actionFrontControllerSetMedia com uma prioridade que a coloca depois do CSS do tema.
• As etiquetas de pré-carregamento são emitidas por displayHeader; a lista dos ficheiros críticos é guardada em cache na configuração: nenhum pedido SQL adicional por página do front-office.
• A remoção das chamadas externas é executada em actionOutputHTMLBefore, no HTML final, depois da cache Smarty.
• O botão Reconstruir o CSS força uma regeneração completa: útil depois de uma intervenção manual nos ficheiros ou de um restauro de cópia de segurança.

Verificar a conformidade RGPD

1. Abra a sua loja numa janela de navegação privada.
2. Abra as ferramentas de programador (F12), separador Rede, e filtre por fonts.g.
3. Recarregue a página: a lista deve ficar vazia. Se aparecer um pedido para fonts.googleapis.com ou fonts.gstatic.com, ative a opção de remoção das chamadas externas e limpe a cache do PrestaShop.

Teste a página inicial, uma ficha de produto e o checkout: alguns módulos de pagamento ou de widgets de terceiros carregam os seus próprios tipos de letra em iframes, fora do alcance da limpeza HTML (aplicam-se então as suas faixas de consentimento respetivas).

Multiloja

Os tipos de letra importados e as regras de substituição são partilhados entre todas as lojas de uma mesma instalação. Os interruptores de ativação e a opção de remoção das chamadas externas seguem o contexto de configuração padrão do PrestaShop.

Resolução de problemas

• O tipo de letra não aparece no front-office: verifique por ordem: o interruptor principal está ativado, a família está ativa, existe uma regra de substituição para o seletor certo, e a cache do PrestaShop foi limpa (Parâmetros avançados > Desempenho). Inspecione depois o elemento no navegador: se a regra aparecer riscada, um estilo do tema mais específico sobrepõe-se a ela; marque !important na regra.
• A importação falha com um erro de rede: o seu servidor deve poder alcançar fonts.googleapis.com e fonts.gstatic.com em saída (cURL ou allow_url_fopen). Num servidor atrás de uma firewall estrita, peça a abertura destes dois domínios ao seu alojamento.
• O preenchimento automático não propõe nada: o catálogo não pôde ser descarregado (rede). Clique no botão de atualização do catálogo, ou escreva o nome exato da família e valide com Enter: a importação direta funciona sem o catálogo.
• Erro de escrita na importação ou na reconstrução: dê permissões de escrita ao servidor web em modules/dffontmanager/views/fonts/ e modules/dffontmanager/views/css/generated/.
• Subsistem chamadas à Google apesar da opção de remoção: identifique a fonte no separador Rede (coluna iniciador). Se se tratar de um iframe de terceiros (pagamento, avaliações, mapa), a limpeza HTML não se lhe pode aplicar: é o consentimento desse serviço de terceiros que rege.

Atualização do módulo

Desinstalação

A desinstalação elimina as duas tabelas, as chaves de configuração, os ficheiros de tipos de letra descarregados e a folha de estilos gerada. A sua loja recupera instantaneamente os tipos de letra de origem do seu tema: nenhum resíduo.