Google Fonts enfreint le RGPD : Cause, Sanctions, Solutions

RGPD : depuis 2020, les propriétaires de sites internet fulminent contre ses lignes directrices très strictes.

Après les cookies, Google Analytics, voici Google Fonts !

Découvrez, sans plus attendre, pourquoi l’utilisation des Web Fonts Google sur votre site internet est non conforme au RGPD, les sanctions encourues et les solutions pour y remédier.

Qu'est-ce que le RGPD ?

Acronyme de Règlement Général sur la Protection des Données, le RGPD, (en anglais, GDPR), est un règlement, entré en vigueur le 25 mai 2018, qui oblige toutes les entreprises à protéger les données personnelles et la vie privée de tous les résidents de l’Union européenne (UE).

Ces règles du RGPD s’appliquent, bien entendu, au monde du web :

Les propriétaires des sites internet doivent spécifier le type de données qu’ils collectent, leur utilisation et la manière dont ils les traitent.
Les visiteurs doivent accepter la politique de confidentialité avant d’accéder à tout contenu du site.
Les visiteurs du site peuvent demander la suppression définitive de toutes leurs données, conformément au droit à l’oubli.

Partant d’une idée louable, le RGPD est devenu, avec le temps, un véritable casse-tête pour de nombreux propriétaires de sites web.

Dates symboliques du RGPD

Voici quelques dates symboliques du RGPD applicables dans le monde digital :

16 juillet 2020 : invalidation du Privacy Shield par la Cour de justice de l’Union européenne (accord encadrant le transfert de données depuis l’UE vers les Etats-Unis).
1^er octobre 2020 : Recommandation par la CNIL (Commission nationale de l’informatique et des libertés) sur l’usage de cookies et autres traceurs.
1^er avril 2021 : Mise en application de la réglementation de la CNIL sur le consentement aux cookies (la mise en conformité se faisant via l’ajout d’un bandeau cookies).
22 décembre 2021 : L’autorité autrichienne de protection des données (DSB) déclare l’utilisation de Google Analytics illégale, car elle constitue une violation des articles 44 et suivants du RGPD.
20 janvier 2022 : Un tribunal munichois, en Allemagne, a statué que l’utilisation des Google Fonts enfreint le RGPD, et, de facto, est également illégale.
10 février 2022 : Première mise en demeure de la CNIL envers des sites web utilisant Google Analytics (la mise en conformité passe, pour l’instant, par une alternative payante, telle Matomo).
23 juin 2022 : Après l’Autriche et la France L’Italie, à son tour, juge l’utilisation de Google Analytics comme illégale.

Nous pouvons, désormais, nous poser la question légitime : À quand le tour de Google Search Console ?

Qu'est-ce que les Google Fonts ?

Google Fonts est une bibliothèque de polices mise à disposition gratuitement par le moteur de recherche Google.

Pour le choix des polices Web, vous pourrez choisir parmi 5 catégories :

Serif (avec empattement).
Sans Sérif (sans empattement).
Display (Affichage).
Handwriting (Écriture manuscrite).
Monospace (Écriture style machine à écrire).

En plus d’une gamme étendue de 1424 familles de polices de caractères qui embelliront votre site, Google propose également de choisir leurs propriétés, afin de rendre votre contenu textuel plus agréable à lire :

Nombre de styles.
Épaisseur.
Inclinaison.
Largeur.

Les Web Fonts Google, sont pour la plupart, compatibles avec WOFF 2.0 (Web Open Font Format), un format de compression qui permet aux navigateurs Web de charger vos pages plus rapidement.

À noter qu’en 2021, Google a rajouté plus de 2500 icônes à son catalogue Google Fonts.

Quelles sont les Web Fonts Google les plus populaires ?

Les polices Web Google les plus populaires sont :

Source Sans Pro.
Poppins.
Montserrat.
Roboto.
Lora.
Lato.
Open Sans.
Oswald.
Playfair Display.
Nunito Sans.
Raleway.
PT Sans.

Pourquoi l'utilisation des Web Google Fonts est non conforme au RGPD ?

Les Google Web Fonts doivent être hébergées localement sur votre site web. À défaut, leur utilisation est considérée comme non conforme au RGPD.

Et c’est là où le bât blesse !

Pour mieux comprendre le problème, voici les différentes étapes lorsqu’un visiteur arrive sur votre site WordPress ou autre CMS (Shopify, Prestashop, Joomla, Wix, etc) :

Un internaute clique sur votre lien dans les résultats de recherche (SERP) et est dirigé sur une page spécifique de votre site internet.
Afin que votre page s’affiche avec les polices web (Web Fonts) que vous avez choisies, au lieu des polices système Web Safe Fonts (Arial, Helvetica, Times new Roman, Verdana, etc) préinstallées dans tous les systèmes d’exploitation (Windows 11, etc), votre feuille de style (CSS) devra être téléchargée par le navigateur utilisé par votre visiteur (Mozilla, Chrome, Edge, etc).
Les Web Fonts de Google font partie de votre CSS, et là deux choix sont possibles :
– Soit elles sont hébergées localement sur votre serveur, et donc il n’y a aucun souci aux yeux du RGPD.
– Soit elles ne sont pas hébergées localement, et là, il y a problème !
Dans ce dernier cas (le plus fréquent à ce jour), le navigateur de votre visiteur demandera automatiquement le fichier Web Fonts aux serveurs de Google.
Ces derniers utiliseront (et stockeront) l’adresse IP de votre visiteur pour lui envoyer le fichier de polices web.
Votre page web s’affichera telle que vous l’avez conçue grâce à la réception de ce dernier (le navigateur de votre visiteur en profitera pour le stocker dans son cache).

Le problème, au regard du RGPD, est que Google recherchera et stockera automatiquement l’adresse IP (Internet Protocol) de votre visiteur sans son consentement préalable.

RGPD - Sanctions financières

En cas de non-respect des règles du RGPD, vous pouvez faire l’objet d’une sanction pécuniaire plus ou moins importante selon l’infraction constatée.

Le montant des sanctions financières peuvent atteindre (le montant le plus élevé est toujours retenu) :

20 millions d’euros d’amende.
4 % du chiffre d’affaires annuel mondial.

À noter que dans le cas, précité, de l’entreprise allemande ayant utilisé, en violation des règles du RGPD, les polices de caractères de Google, l’amende financière a été de 100 euros, et à charge pour elle de se mettre rapidement en conformité.

Solutions

Pour être en conformité avec le RGPD concernant les Google Web Fonts, 2 solutions sont possibles :

Demander un consentement préalable.
Héberger localement vos polices Google.

1. Demander un consentement préalable

La première des solutions pour être conforme au RGPD est de demander à votre visiteur son consentement préalable.

Cela se passe en 5 étapes :

Un internaute clique sur votre lien dans la SERP et atterrit sur la page web souhaitée.
Le contenu de votre page s’affiche avec les Web Safe Fonts.
Une demande de consentement est faite à votre visiteur pour aller chercher le fichier des Web Fonts sur les serveurs de Google.
Si votre visiteur refuse, alors votre fichier Web Fonts ne pourra être chargé (l’affichage de votre page restera avec les Web Safe Fonts (pas idéal du tout !).
Si votre visiteur accepte, alors le chargement des polices Web s’effectuera.

Clairement, avec cette solution, vous êtes certain d’avoir 100% de taux de rebond. Et bien entendu, je vous la déconseille vivement.

2. Héberger localement vos polices Google

La deuxième, et la meilleure solution, pour ne pas enfreindre les directives du RGPD est d’héberger tous vos polices Google localement sur votre serveur web.

Trois méthodes sont possibles pour héberger vos polices Google en local :

Manuellement.
Via un plugin WordPress.
Via votre thème WordPress OceanWP.

1. Manuellement

La première méthode, pour héberger vos Google Web Fonts localement, consiste à le faire manuellement.

Honnêtement, cela est assez technique et fastidieux à mettre en application.

Je ne vais pas m’attarder dessus, car il existe des tutos en ligne qui expliqueront, bien mieux que moi, la méthodologie à appliquer.

Un des meilleurs tutos est celui de speckyboy.

Ce tuto est en anglais, mais avec le traducteur automatique de Google Chrome, son contenu textuel s’affichera en langue française.

2. Plugin WordPress

Autant la première solution est valable quelque soit le CMS utilisé, autant les deux solutions suivantes sont exclusives au CMS WordPress.

Si vous avez développé votre site sous WordPress, l’hébergement local de vos Google Web Font est très simple.

Vous pouvez, tout d’abord, utiliser le plugin gratuit OMGF.

En utilisant l’API Google Fonts Helper, ce plugin WordPress va automatiquement :

Rechercher les polices Web Google chaque fois qu’une requête est effectuée à fonts.googleapis.com et fonts.gstatic.com.
Les télécharger et les copier localement sur votre serveur.
Générer une feuille de style pour vos polices web.
La mettre en cache pour accélérer le temps de chargement de votre page web.
Minimiser vos requêtes DNS (Domain Name System).
Etc.

À noter qu’il existe une version payante de ce plugin WordPress : OMGF Pro, à 19€ annuel, qui ajoute plusieurs fonctionnalités avancées permettant d’en tirer toute sa quintessence :

Préchargement des fichiers de police au-dessus de la ligne de flottaison (pli).
Suppression des polices Google inutilisées.
Ajouter une pile de polices de secours.
Suppression des requêtes vers fonts.googleapis.com ou fonts.gstatic.com.
Etc.

En utilisant OMGF Pro, votre site sera en conformité avec le RGPD, tout en améliorant ses performances d’affichage.

3. Thème WordPress OceanWP

Si vous utilisez le thème WordPress OceanWP, cela est encore plus simple !
À noter que je ne suis pas affilié à OceanWP.

Pourquoi choisir le thème OceanWP ?

Créé en 2016, OceanWP est un thème WordPress gratuit et parmi les plus populaires et les mieux notés (avec Astra, Hello et GeneratePress) :

+ de 700.000 installations actives.
Noté 5/5 étoiles sur wordpress.org.
5132 avis 5 étoiles.

C’est un thème polyvalent gratuit qui offre de multiples fonctionnalités professionnelles prêtes à l’emploi, telles que :

Installation d’un modèle de sites web (template) en 1 clic.
100% responsive.
100% personnalisable.
100% compatible avec le langage RTL (Right-to-Left).
100% compatible WPML (thème multilingue).
Optimisé pour le SEO (Search Engine Optimization).
Optimisé pour le commerce électronique (WooCommerce).
Optimisation du codage pour être léger et très rapide.
Développé pour être 100% compatible avec les constructeurs de pages (Elementor, Gutenberg, …).
Etc.

Bien entendu, pour tirer la quintessence de ce thème WordPress, il y a une version PRO qui vous permettra d’obtenir :

14 extensions premium.
210 démos professionnelles.
12 mois de mise à jour des produits Premium.
12 mois d’assistance (très rapide) par e-mail.
Etc.

Les prix de cette version Pro vont de 43$ annuel pour 3 sites WordPress à 127$ annuel pour 50 sites.

Utilisant depuis 3 ans le thème OceanWP pour vous présenter mes services en tant que consultant SEO / SXO freelance, les témoignages de mes clients, les tarifs SEO que je pratique, etc, je ne peux que vous conseiller de choisir ce thème pour votre blog, votre site vitrine ou votre site e-commerce.

Comment héberger les polices Google localement avec OceanWP ?

Si vous utilisez le thème OceanWP, vous n’avez même pas besoin d’installer le plugin OMGF.
En un seul clic, vos polices Google seront hébergées localement sur votre site web.

La procédure est très facile à réaliser, et cela se déroule en 7 étapes :

Ouvrez votre tableau de bord WordPress.
Dans le menu vertical situé à gauche, cliquez sur Apparence.
Un sous-menu va s’afficher, cliquez sur Personnaliser.
Le menu de personnalisation d’OceanWP s’affiche, cliquez sur Typographie.
Le menu de personnalisation de la typographie de votre thème s’affiche, cliquez sur Général.
Un menu apparait, cochez la case Google Fonts From Site.
Cliquez, enfin sur Publié.

Voilà, c’est terminé !

En activant cette fonctionnalité :

Toutes les Google Fonts que vous avez déjà sélectionnées dans votre section Typographie seront téléchargées sur votre site WordPress et hébergées localement.
Il en est de même pour toutes vos futures polices Google que vous aurez sélectionnées dans l’outil de personnalisation.

OceanWP est l’un des tous premiers thèmes WordPress à disposer d’une fonctionnalité de conformité RGPD intégrée, de sorte que ses utilisateurs n’aient pas à s’exposer à des sanctions pécuniaires.

Comment supprimer les requêtes API automatiques à Google ?

Quelque soit la solution que vous preniez, il faudra interdire, de nouveau, les requêtes API pour vos Google Fonts.

En effet, malgré le fait que vous ayez hébergé vos polices web en local, certaines extensions WordPress peuvent les charger automatiquement sur votre site.

Il faudra, de fait, les désactiver de façon automatique, pour que :

Votre site reste toujours conforme au RGPD.
La vitesse de chargement de vos pages web ne soit pas ralentie.

Cette fonctionnalité est incluse dans le plugin WordPress OMGF en version Pro.

Mais si vous utilisez l’excellent plugin d’optimisation WordPress Autoptimize, en concomitance avec OceanWP, vous n’aurez pas besoin d’acheter OMGF Pro.

Cela est d’un facilité déconcertante et se fait en 6 étapes :

Ouvrez votre tableau de bord WordPress.
Dans le menu de gauche, cliquez sur Extensions, puis sur Extensions installées.
Cliquez sur Réglages de votre extension Autoptimize.
Cliquez sur l’onglet Extra.
Cochez la case Retirer les polices Google ?.
Cliquez, enfin, sur Enregistrer les modifications.

Voilà, vous avez désactivé définitivement les requêtes API automatiques pour aller chercher vos Google Fonts.

Comment vérifier que les requêtes API Fonts ont bien été désactivées ?

Il est toujours utile de vérifier les manipulations quelles qu’elles soient, surtout lorsque le RGPD est en jeu, et avec toutes les conséquences financières qui peuvent en découler.

Dans le cas qui nous intéresse, il faudra le faire en deux étapes :

Vérification de l’existence de requêtes Api Google Fonts.
Vérification de l’hébergement local en concomitance avec l’arrêt de requêtes API Google Fonts.

1. Vérification de l'existence de requêtes Api Google Fonts

Pour vérifier si votre thème envoie des requêtes API pour vos polices web de Google, cela s’effectue avec Chrome DevTools.

Cela se passe en 7 étapes :

Ouvrez une nouvelle fenêtre de navigation privée dans Google Chrome.
Videz votre cache avec un plugin de cache WordPress, tel que WP Fastest Cache.
Lancez votre site (peu importe la page web).
Cliquez sur le bouton droit de votre souris.
Un menu déroulant va s’afficher, cliquez sur Inspecter.
Sur la droite, la fenetre d’affichage de Chrome DevTools va s’ouvrir, cliquez sur l’onglet Sources.
Sur la gauche, va s’afficher différents serveurs à partir desquels vos fichiers CSS sont chargés. Parmi eux, il y a ceux de Google : fonts.googleapis.com et fonts.gstatic.com.

Cela indique bien que votre site web fait des requêtes API pour aller récupérer les polices Web Google.

2. Vérification de l'hébergement local de vos Google Fonts

On va reprendre la même procédure, mais après, bien sûr, avoir mis en application une des méthodes proposées précédemment.

Cela se passe toujours avec Chrome DevTools, et en 7 étapes :

Ouvrez une nouvelle fenêtre de navigation privée dans Google Chrome.
Videz votre cache avec un plugin de cache WordPress, tel que WP Fastest Cache.
Lancez votre site (peu importe la page web).
Cliquez sur le bouton droit de votre souris.
Un menu déroulant va s’afficher, cliquez sur Inspecter.
Sur la droite, la fenetre d’affichage de Chrome DevTools va s’ouvrir, cliquez sur l’onglet Sources.
Sur la gauche, va s’afficher différents serveurs à partir desquels vos fichiers CSS sont chargés. Mais là, les serveurs de Google fonts.googleapis.com et fonts.gstatic.com ne sont plus présents.

Cela indique bien que votre site web ne fait plus de requêtes API pour aller récupérer les polices Web Google, et s’il s’affiche correctement, alors vos Google Fonts sont bien hébergés localement.

Quel est l'impact en termes de vitesse d'héberger localement les Web Google Fonts ?

Il est intéressant de voir l’impact d’héberger en local vos Web Google Fonts.

En effet, depuis l’annonce officielle de Google en 2020 (son véritable déploiement ayant eu lieu en juin 2021) de ses signaux de qualité Core Web Vitals, la vitesse de chargement d’une page web est devenue très importante à double titre :

Au niveau SEO : en devenant un léger critère de positionnement de vos pages sur la SERP de Google.
Au niveau UX (expérience utilisateur) : en étant une véritable cause d’un taux de rebond élevé.

Les Core Web Vitals se composent de trois métriques :

Largest Contentful Paint (LCP).
First Input Delay (FID)
Cumulative Layout Shift (CLS).

La métrique qui nous intéresse, dans le cas présent, est le LCP.

Largest Contentful Paint (en français, la plus grande peinture de contenu) mesure le temps que votre page web met pour afficher à votre visiteur le contenu le plus grand (image, vidéo ou bloc de texte) à l’écran.
Google ne prenant en compte que le contenu au-dessus du pli.

Pour offrir une bonne expérience utilisateur, il faudra que le LCP<2.5 secondes.
Au-delà de 4 secondes, il faudra impérativement en trouver la cause et la supprimer.

Temps de chargement de la page web avant l'hébergement local des Google Fonts

Logiquement, vos pages web devraient se charger plus rapidement car les requêtes vers fonts.googleapis.com et fonts.gstatic.com pour récupérer vos fichiers CSS seront supprimées.

En choisissant la fonctionnalité d’hébergement local, en 1 clic, d’OceanWP, le thème nous indique que le temps de chargement des polices web dépendra de votre site internet.

Il est donc important d’aller constater, avec GTmetrix, son impact sur le temps de chargement de vos pages web.

Pour l’exemple, je vais utiliser mon site internet.
À savoir également qu’il est hébergé chez O2switch, l’excellent hébergeur web français.

Nous pouvons oberver que la page d’accueil de mon site internet a :

Un LCP de 879 ms.
Un temps de chargement complet (Fully Loaded Time) de 1.6 secondes.

C’est un bon résultat, mais sans être excellent non plus.

Temps de chargement de la page web après l'hébergement local des Google Fonts

Voyons maintenant les résultats après l’hébergement local des Google Fonts via OceanWP et Autoptimize.

Nous pouvons constater que la page d’accueil de mon site internet a maintenant :

Un LCP de 1.2 s.
Un temps de chargement complet (Fully Loaded Time) de 1.8 secondes.

Le résultat s’est dégradé, sans être non plus catastrophique.

Je pense qu’avec le plugin OMGF Pro, les résultats auraient été meilleurs, mais bon le principal est d’être, sous réserve d’un avis juridique, en conformité avec le RGPD.

Conclusion

Le RGPD est une législation qui complique la tâche des propriétaires de sites web, car les règles sont complexes.

Cependant, si vous utilisez WordPress, le plugin OMGF Pro ou l’association OceanWP et Autoptimize, le problème de légalité des polices web de Google ne sera plus qu’un lointain souvenir.

Si vous avez aimé cet article sur le RGPD et les Google Web Fonts, laissez-moi un petit commentaire.