Utiliser Google Fonts sur Prestashop sans enfreindre le RGPD

Pourquoi Google Fonts pose problème

Google Fonts propose des centaines de polices gratuites, faciles à intégrer : il suffit d'ajouter une ligne de code qui appelle la police depuis les serveurs de Google. Et c'est justement là que se trouve le problème.

À chaque visite, le navigateur de votre client se connecte aux serveurs de Google pour télécharger la police et transmet ainsi son adresse IP à Google, une donnée personnelle au sens du RGPD, sans qu'il y ait consenti.

En janvier 2022, le tribunal régional de Munich a condamné l'exploitant d'un site à verser des dommages et intérêts à un visiteur pour cette raison. Le tribunal a estimé que ce transfert ne pouvait pas reposer sur l'intérêt légitime du site, puisqu'il est tout à fait possible d'utiliser ces polices sans se connecter à Google. Depuis, de nombreux sites, en Allemagne notamment, ont reçu des réclamations pour ce motif.

La solution est simple : héberger les polices sur votre propre serveur. Vous pouvez continuer à utiliser les polices Google, mais vos visiteurs les téléchargent depuis votre boutique, sans aucun contact avec Google.

Un gain de performance en prime

Héberger vos polices n'est pas seulement plus sûr juridiquement, c'est aussi plus rapide :

• Le navigateur n'a plus besoin de se connecter à un serveur supplémentaire avant d'afficher le texte.
• Vous ne chargez que les graisses (normal, gras…) et les jeux de caractères dont vous avez réellement besoin.
• Vous maîtrisez la mise en cache des fichiers.

Vérifiez si votre boutique est concernée

De nombreux thèmes et modules chargent encore leurs polices depuis Google. Pour le vérifier :

• Ouvrez votre boutique et appuyez sur F12 pour afficher les outils de développement de votre navigateur. Allez dans l'onglet Réseau, puis rechargez la page.
• Tapez fonts.g dans le champ de filtre.

Si des fichiers provenant de fonts.googleapis.com ou fonts.gstatic.com apparaissent, votre boutique charge des polices depuis Google. Pensez à vérifier plusieurs pages (accueil, catégorie, fiche produit, commande...) car un module peut charger sa propre police sur une seule page.

Hébergez vos polices sur votre serveur

La solution, nous l'avons vu plus tôt, est donc d'héberger vos polices sur votre propre serveur. Pour mettre ceci en place :

1. Téléchargez les polices au bon format

Le format à utiliser est le WOFF2, le plus léger, reconnu par tous les navigateurs actuels. L'outil gratuit google webfonts helper vous permet de choisir une police Google, ses graisses et ses jeux de caractères, puis de télécharger les fichiers WOFF2 avec le code CSS correspondant.

Ne sélectionnez que ce que vous utilisez réellement : en général, le jeu de caractères latin et deux ou trois graisses suffisent.

2. Ajoutez les fichiers à votre thème

Copiez les fichiers dans le dossier assets/fonts de votre thème. Idéalement, travaillez dans un thème enfant : vos modifications ne seront pas écrasées lors de la prochaine mise à jour du thème.

3. Déclarez les polices dans votre CSS

Ajoutez une règle @font-face pour chaque graisse dans la feuille de style personnalisée de votre thème (souvent assets/css/custom.css). Par exemple :

@font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2');
}

La propriété font-display: swap permet d'afficher immédiatement le texte avec une police de secours, en attendant le chargement de la vôtre. Ainsi, vos visiteurs n'ont jamais de page sans texte.

4. Supprimez l'appel à Google

Il reste à retirer la ligne qui charge la police depuis Google. Selon les cas, elle se trouve :

• Dans un template du thème, souvent templates/_partials/head.tpl ou stylesheets.tpl (balise <link> vers fonts.googleapis.com).
• Dans un fichier CSS du thème (ligne @import).
• Dans la configuration d'un de vos modules, qui peut parfois proposer une option pour désactiver les polices Google depuis sa configuration en back-office.

Videz ensuite le cache de Prestashop (Paramètres avancés >> Performances) et refaites la vérification décrite plus haut : plus aucun fichier ne doit provenir de Google.

Et avec le thème Universal ?

Si vous utilisez le thème Prestashop Universal, vous n'avez rien à faire : vous choisissez vos polices parmi les polices Google directement dans le module Prestacrea Theme Editor, et le module les télécharge une seule fois et les héberge sur votre serveur. Seules les graisses réellement utilisées sur votre boutique sont chargées, au format WOFF2, et vos visiteurs ne se connectent jamais à Google.

Conclusion

Héberger vos polices sur votre serveur est une modification rapide, qui protège vos visiteurs, vous met en conformité avec le RGPD et accélère l'affichage de votre boutique. Prenez quelques minutes pour vérifier votre boutique. C'est un réflexe à avoir aussi à chaque installation d'un nouveau thème ou module.