Google Fonts Local — Polices Auto-hébergées RGPD (dffontmanager)

DF Font Manager héberge vos polices Google Fonts directement sur votre serveur PrestaShop : vos visiteurs ne contactent plus jamais les serveurs de Google (conformité RGPD), et vous changez la typographie de votre boutique par simples règles CSS, sans modifier un seul fichier du thème. Le module gère l’import depuis le catalogue Google Fonts, le subsetting automatique par alphabet, le préchargement du fichier critique, la stratégie font-display et l’upload de polices maison.

Installation

1. Dans votre back-office PrestaShop, ouvrez Modules > Gestionnaire de modules.
2. Cliquez sur Installer un module et déposez le fichier dffontmanager.zip.
3. Un onglet Gestionnaire de polices apparaît sous le menu Design : c’est là que tout se passe (le bouton Configurer du module y redirige également).

Le module s’enregistre sur trois hooks (displayHeader, actionFrontControllerSetMedia, actionOutputHTMLBefore) et crée deux tables : les polices installées et les règles de remplacement. Les fichiers de police sont stockés dans modules/dffontmanager/views/fonts/ et la feuille de style générée dans modules/dffontmanager/views/css/generated/ — vérifiez que ces dossiers sont accessibles en écriture.

Réglages généraux

• Activer les polices auto-hébergées — interrupteur principal : charge la feuille de style générée et les balises de préchargement en front-office.
• Supprimer les appels externes Google Fonts (RGPD) — nettoie le HTML rendu de la boutique : toutes les balises link pointant vers fonts.googleapis.com ou fonts.gstatic.com (feuilles de style, preconnect, préchargements) ainsi que les @import inline correspondants sont retirés avant l’envoi de la page. C’est cette option qui garantit qu’aucune requête ne part vers Google, même si votre thème ou un autre module en injecte.
• Stratégie font-display — appliquée à toutes les déclarations @font-face générées. swap (défaut) garde le texte visible pendant le chargement ; block, fallback, optional et auto sont disponibles pour des besoins spécifiques.

Importer une police Google Fonts

1. Dans le panneau Importer une police Google, tapez au moins deux caractères : l’autocomplétion parcourt le catalogue Google Fonts complet, mis en cache 7 jours sur votre serveur (bouton de rafraîchissement à côté du champ).
2. Sélectionnez une famille : les variantes disponibles (graisses 100 à 900, normal et italique) et les alphabets s’affichent. Par défaut, les graisses 400 et 700 et les subsets latin + latin-ext sont pré-cochés.
3. Cliquez sur Importer localement.

Le module interroge alors l’API CSS de Google, télécharge les fichiers woff2 officiels correspondant à votre sélection (un fichier par alphabet et par variante), vérifie leur signature binaire, les range dans views/fonts/nom-de-la-famille/ et régénère la feuille de style. La page se recharge avec la famille visible dans le tableau des polices installées, avec son poids total sur disque.

Le subsetting automatique

Google découpe chaque police en fichiers par alphabet (latin, latin-ext, cyrillique, grec, vietnamien, etc.). Le module ne télécharge que les alphabets cochés et conserve pour chaque fichier son unicode-range d’origine dans la déclaration @font-face. Le navigateur ne demande donc que les plages de caractères réellement affichées sur la page : une boutique francophone typique sert 20 à 90 Ko de polices au lieu de plusieurs centaines.

Réimporter ou modifier une famille

Pour ajouter une graisse ou un alphabet à une famille déjà installée, refaites simplement l’import avec la nouvelle sélection : les anciens fichiers de la famille sont remplacés, les règles de remplacement qui l’utilisent restent intactes.

Uploader une police maison

Le panneau Upload d’une police personnalisée accepte les formats woff2 (recommandé), woff, ttf et otf. Indiquez le nom de la famille, la graisse et le style, puis envoyez le fichier — un fichier par combinaison graisse/style, fusionnés automatiquement sous la même famille. Chaque fichier est validé par sa signature binaire (et non par son extension), puis intégré à la feuille générée et disponible dans les règles exactement comme une police Google.

Gérer les polices installées

Le tableau des polices installées affiche pour chaque famille : la source (google ou custom), les variantes, les subsets, le nombre de fichiers et leur poids sur disque, puis deux interrupteurs :

• Actif — inclut ou exclut la famille de la feuille de style générée (les fichiers restent sur le disque).
• Préchargement — voir la section dédiée ci-dessous.

Le bouton de suppression retire la famille, ses fichiers sur disque et toutes les règles qui l’utilisent, puis reconstruit la feuille de style.

Règles de remplacement

C’est ici que vous appliquez vos polices sans toucher au thème. Chaque règle associe un sélecteur CSS à une police installée, avec quatre options :

• Graisse — force un font-weight (laissez vide pour hériter du thème) ;
• Style — normal ou italique (vide pour hériter) ;
• Pile de secours — familles génériques affichées si la police n’est pas encore chargée : sans-serif, serif, monospace ou system-ui, sans-serif ;
• !important — coché par défaut, garantit que la règle l’emporte sur les styles du thème quelle que soit leur spécificité.

Exemples de sélecteurs courants :

• body — toute la boutique ;
• h1, h2, h3, h4, h5, h6 — tous les titres ;
• .btn, button — les boutons ;
• .product-title, .h3.product-title — les titres produits des listings (à adapter à votre thème).

Chaque ajout ou suppression de règle reconstruit immédiatement la feuille de style. La feuille est chargée après le CSS du thème : même sans !important, vos règles gagnent la cascade à spécificité égale.

Préchargement — bonnes pratiques

L’interrupteur Préchargement d’une famille émet en tête de page une balise link rel=preload as=font crossorigin pour son fichier critique, choisi automatiquement : woff2, style normal, alphabet latin, graisse la plus proche de 400. Le navigateur télécharge ainsi la police en parallèle du CSS, avant même d’en découvrir l’usage — le texte définitif s’affiche plus tôt.

Fonctionnement technique

• La feuille générée fonts-v{horodatage}.css contient toutes les déclarations @font-face (avec font-display et unicode-range) suivies des règles de remplacement. Chaque reconstruction produit un nouveau nom de fichier (cache-busting automatique) et purge les anciennes versions.
• Elle est enregistrée via actionFrontControllerSetMedia avec une priorité qui la place après le CSS du thème.
• Les balises de préchargement sont émises par displayHeader ; la liste des fichiers critiques est mise en cache en configuration — aucune requête SQL supplémentaire par page front.
• La suppression des appels externes s’exécute dans actionOutputHTMLBefore, sur le HTML final, après le cache Smarty.
• Le bouton Reconstruire le CSS force une régénération complète — utile après une intervention manuelle sur les fichiers ou une restauration de sauvegarde.

Vérifier la conformité RGPD

1. Ouvrez votre boutique dans une fenêtre de navigation privée.
2. Ouvrez les outils de développement (F12), onglet Réseau, et filtrez sur fonts.g.
3. Rechargez la page : la liste doit rester vide. Si une requête vers fonts.googleapis.com ou fonts.gstatic.com apparaît, activez l’option de suppression des appels externes et videz le cache PrestaShop.

Testez la page d’accueil, une fiche produit et le checkout : certains modules de paiement ou de widgets tiers chargent leurs propres polices dans des iframes, hors de portée du nettoyage HTML (leurs bandeaux de consentement respectifs s’appliquent alors).

Multiboutique

Les polices importées et les règles de remplacement sont partagées entre toutes les boutiques d’une même installation. Les interrupteurs d’activation et l’option de suppression des appels externes suivent le contexte de configuration PrestaShop standard.

Dépannage

• La police ne s’affiche pas en front — vérifiez dans l’ordre : l’interrupteur principal est activé, la famille est active, une règle de remplacement existe pour le bon sélecteur, et le cache PrestaShop est vidé (Paramètres avancés > Performances). Inspectez ensuite l’élément dans le navigateur : si la règle apparaît barrée, un style du thème plus spécifique la surcharge — cochez !important sur la règle.
• L’import échoue avec une erreur réseau — votre serveur doit pouvoir joindre fonts.googleapis.com et fonts.gstatic.com en sortie (cURL ou allow_url_fopen). Sur un serveur derrière un pare-feu strict, demandez l’ouverture de ces deux domaines à votre hébergeur.
• L’autocomplétion ne propose rien — le catalogue n’a pas pu être téléchargé (réseau). Cliquez sur le bouton de rafraîchissement du catalogue, ou tapez le nom exact de la famille et validez avec Entrée : l’import direct fonctionne sans le catalogue.
• Erreur d’écriture à l’import ou à la reconstruction — donnez les droits d’écriture au serveur web sur modules/dffontmanager/views/fonts/ et modules/dffontmanager/views/css/generated/.
• Des appels Google subsistent malgré l’option de suppression — identifiez la source dans l’onglet Réseau (colonne initiateur). S’il s’agit d’une iframe tierce (paiement, avis, carte), le nettoyage HTML ne peut pas s’y appliquer : c’est le consentement de ce service tiers qui gouverne.

Mise à jour du module

Désinstallation

La désinstallation supprime les deux tables, les clés de configuration, les fichiers de police téléchargés et la feuille de style générée. Votre boutique retrouve instantanément les polices d’origine de son thème — aucun résidu.