Google Fonts sur Webflow : le risque RGPD à corriger

TL;DR

Les Google Fonts chargées via l'API Google transmettent automatiquement l'adresse IP de chaque visiteur aux serveurs de Google, sans consentement préalable. L'adresse IP est une donnée personnelle au sens du RGPD : cette transmission constitue un traitement de données non conforme. En janvier 2022, le tribunal de Munich a condamné un site pour ce motif. La solution consiste à auto-héberger les polices dans Webflow en les uploadant comme custom fonts, ce qui supprime tout appel vers les serveurs Google.

Pourquoi les Google Fonts posent-elles un problème RGPD ?

L'API Google Fonts fonctionne de manière simple : lorsqu'un navigateur charge une page qui utilise une police hébergée chez Google, il envoie une requête HTTP aux serveurs de Google (fonts.googleapis.com). Cette requête contient automatiquement l'adresse IP du visiteur.

Google indique collecter ces adresses IP et les utiliser à des fins analytiques. La Cour de justice de l'Union européenne a confirmé dans l'arrêt Breyer (affaire C-582/14) que l'adresse IP constitue une donnée personnelle. Le RGPD exige donc une base légale pour ce traitement.

L'intérêt légitime ne peut pas être invoqué ici, car l'auto-hébergement des polices est une alternative technique simple qui évite tout transfert de données. Le tribunal de Munich l'a confirmé en janvier 2022 : le responsable du site aurait pu héberger les polices localement et éviter un traitement de données supplémentaire.

Ce que dit la jurisprudence

En janvier 2022, le Landgericht de Munich a jugé qu'un site utilisant les Google Fonts via l'API Google violait le RGPD. Le tribunal a considéré que la transmission de l'adresse IP du visiteur à Google, sans consentement préalable, constituait une atteinte au droit à l'autodétermination informationnelle. Le site a été condamné à 100 euros de dommages-intérêts, mais le précédent juridique est significatif.

Depuis cette décision, des milliers de mises en demeure (Abmahnungen) ont été envoyées en Allemagne à des propriétaires de sites utilisant les Google Fonts de manière externe. D'autres autorités de protection des données en Europe, notamment en Autriche, ont pris des positions similaires.

En France, la CNIL n'a pas publié de décision spécifique sur les Google Fonts à ce jour. Cependant, sa doctrine sur les transferts de données vers les serveurs de tiers sans consentement est cohérente avec la position du tribunal de Munich. Un site qui transmet des adresses IP à Google sans base légale s'expose au même risque.

La bannière cookies suffit-elle à couvrir les Google Fonts ?

Non, la bannière cookies ne résout pas le problème des Google Fonts chargées via l'API Google. Les Google Fonts ne déposent pas de cookies, mais elles déclenchent un transfert de données personnelles (l'adresse IP) dès le chargement de la page.

Ce transfert se produit avant toute interaction de l'utilisateur avec le bandeau de consentement. Techniquement, les requêtes vers fonts.googleapis.com partent au moment du rendu de la page, en même temps que le bandeau s'affiche. L'utilisateur n'a pas encore eu le temps de donner ou refuser son consentement.

Même si vous bloquiez le chargement des polices Google avant consentement (ce qui est techniquement complexe dans Webflow), cela créerait un problème d'affichage : la page s'afficherait d'abord avec des polices par défaut, puis changerait après consentement. L'auto-hébergement reste la seule solution propre. Pour en savoir plus sur la conformité des bannières, consultez notre guide du bandeau cookies conforme.

Comment détecter si votre site Webflow charge des Google Fonts en externe ?

Le moyen le plus fiable est d'inspecter les requêtes réseau dans le navigateur. Voici la méthode avec Chrome.

Étape 1 : ouvrir les outils de développement

Accédez à votre site publié, faites un clic droit, puis "Inspecter". Allez dans l'onglet "Network" (Réseau).

Étape 2 : filtrer les requêtes

Rechargez la page, puis filtrez par "fonts.googleapis.com" ou "fonts.gstatic.com". Si des requêtes apparaissent, votre site charge des polices depuis les serveurs de Google.

Étape 3 : vérifier le code source

Vous pouvez aussi ouvrir le code source de la page (Ctrl+U) et rechercher "webfont.js" ou "fonts.googleapis.com". La présence de ces références confirme le chargement externe. Webflow indique dans sa propre documentation que l'intégration Google Fonts utilise l'API Google Fonts et peut ne pas être conforme au RGPD. Vous pouvez aussi utiliser le scanner FlowConsent pour un audit complet de votre site.

Comment auto-héberger les Google Fonts dans Webflow ?

L'auto-hébergement supprime tout appel vers les serveurs Google. Les fichiers de police sont stockés sur les serveurs de Webflow, et aucune donnée n'est transmise à un tiers.

Étape 1 : télécharger les polices

Rendez-vous sur Google Fonts (fonts.google.com), sélectionnez votre police, et téléchargez les fichiers. Privilégiez les formats WOFF2 pour un chargement optimal. Vous pouvez aussi utiliser l'outil Google Webfonts Helper qui génère directement les fichiers et le CSS correspondant.

Étape 2 : uploader les polices dans Webflow

Dans Webflow, allez dans Site Settings, puis l'onglet Fonts. Sous "Custom Fonts", cliquez sur "Upload". Uploadez vos fichiers WOFF ou WOFF2, et nommez chaque variante clairement (par exemple "Inter Local", "Inter Local Bold").

Étape 3 : remplacer les polices dans le Designer

Ouvrez le Designer Webflow, identifiez chaque classe CSS qui utilise la police Google Fonts, et remplacez-la par la version custom uploadée. Vérifiez tous les breakpoints : certaines polices ne sont parfois utilisées qu'en mobile ou tablette.

Étape 4 : supprimer la connexion Google Fonts

Retournez dans Site Settings, onglet Fonts, section "Google Fonts". Supprimez chaque police Google Fonts ajoutée. Publiez le site, puis vérifiez à nouveau avec les outils de développement qu'aucune requête ne part vers les serveurs Google.

Piège fréquent : les polices par défaut de Webflow

Webflow inclut certaines polices Google par défaut dans son Designer (Lato, Varela, Open Sans, etc.). Si votre site utilise l'une de ces polices, elle peut continuer à charger depuis Google même après suppression dans les paramètres. La solution : uploader la même police en custom font et remplacer toutes les instances dans le Designer. Pour un guide complet sur la gestion des cookies et du consentement sur Webflow, consultez notre article dédié.

Erreurs fréquentes (et comment les éviter)

Penser que le problème est uniquement lié aux cookies. Les Google Fonts ne déposent pas de cookies, mais transmettent l'adresse IP. Le problème relève du transfert de données personnelles, pas de la directive ePrivacy sur les traceurs.

Supprimer la police dans les paramètres sans remplacer les classes CSS. Si vous supprimez une Google Font sans remplacer les classes qui l'utilisent, Webflow appliquera une police par défaut. Identifiez et remplacez toutes les instances avant de supprimer.

Oublier les polices chargées via des embeds custom code. Certains templates ou composants tiers injectent des Google Fonts via des balises <link> dans le custom code. Vérifiez le Head Code et le Body Code dans les paramètres du site et des pages.

Ignorer les polices de services tiers embarqués. Un widget de chat, un formulaire tiers ou un embed peuvent eux-mêmes charger des Google Fonts. L'audit ne doit pas se limiter à vos propres paramètres Webflow.

Ne pas tester après publication. Testez toujours sur le site publié, pas dans le Designer. Le Designer Webflow et le site publié peuvent avoir des comportements différents pour le chargement des ressources externes.

Checklist : corriger les Google Fonts sur Webflow

1. Ouvrir les outils de développement du navigateur sur votre site publié et vérifier les requêtes vers fonts.googleapis.com ou fonts.gstatic.com.
2. Identifier toutes les polices Google utilisées dans le Designer Webflow (inspecter le code source, rechercher "webfont.js").
3. Télécharger les fichiers de polices correspondants au format WOFF2 depuis Google Fonts ou Google Webfonts Helper.
4. Uploader les polices comme custom fonts dans Site Settings, onglet Fonts.
5. Remplacer chaque instance de la police Google par la version custom dans le Designer, sur tous les breakpoints.
6. Vérifier le custom code (Head Code, Body Code, page-level) pour supprimer tout <link> vers fonts.googleapis.com.
7. Supprimer les Google Fonts dans Site Settings, section "Google Fonts".
8. Publier le site et tester à nouveau avec les outils de développement.
9. Vérifier que les services tiers embarqués (chat, formulaires, widgets) ne chargent pas eux-mêmes des Google Fonts.
10. Documenter la correction dans votre registre de conformité RGPD.

FAQ

Est-ce que les Google Fonts déposent des cookies sur les navigateurs des visiteurs ?

Non, les Google Fonts ne déposent pas de cookies. Le problème est différent : chaque requête vers les serveurs Google transmet l'adresse IP du visiteur, une donnée personnelle au sens du RGPD. Ce transfert se fait sans consentement et sans que l'utilisateur en soit informé.

Mon site Webflow utilise des Google Fonts, est-ce que je risque une amende RGPD ?

Le risque existe. En janvier 2022, le tribunal de Munich a condamné un site pour ce motif. En Allemagne, des milliers de mises en demeure ont suivi. En France, la CNIL n'a pas encore pris de décision spécifique sur ce sujet, mais sa doctrine est cohérente avec cette jurisprudence. La correction (auto-hébergement) prend moins d'une heure.

Est-ce que l'auto-hébergement des polices ralentit mon site Webflow ?

Non, c'est souvent l'inverse. L'auto-hébergement supprime une requête DNS vers les serveurs Google et réduit le nombre de domaines tiers chargés. Le format WOFF2 est optimisé pour le web. Dans la plupart des cas, les performances sont identiques ou légèrement meilleures.

Webflow héberge-t-il les Google Fonts localement par défaut ?

Non. Lorsque vous ajoutez une police via l'intégration Google Fonts de Webflow (Site Settings, onglet Fonts, section Google Fonts), Webflow utilise l'API Google Fonts. Webflow le précise dans sa documentation : cette méthode transmet les adresses IP aux serveurs Google. Seules les polices uploadées comme "Custom Fonts" sont hébergées localement.

La directive ePrivacy s'applique-t-elle aux Google Fonts ?

La directive ePrivacy (et l'article 82 de la loi Informatique et Libertés en France) concerne spécifiquement les opérations de lecture et d'écriture sur le terminal de l'utilisateur (cookies, traceurs). Les Google Fonts ne déposent pas de traceur sur le terminal, mais déclenchent un transfert de données personnelles. Le problème relève donc directement du RGPD (articles 6 et 44), pas uniquement de la directive ePrivacy.

Est-ce que Font Awesome et les autres bibliothèques externes posent le même problème ?

Oui, le même raisonnement s'applique à toute ressource chargée depuis un serveur tiers qui collecte l'adresse IP du visiteur. Font Awesome, les CDN JavaScript tiers, les feuilles de style externes : chaque requête vers un serveur tiers transmet l'adresse IP. L'auto-hébergement est la solution recommandée pour chacune de ces ressources.

Conclusion

L'utilisation des Google Fonts via l'API Google sur un site Webflow constitue un point de non-conformité RGPD que la plupart des agences ignorent. La correction est simple, rapide, et améliore souvent les performances du site. Si vous souhaitez identifier tous les traceurs et transferts de données de votre site, y compris les polices externes, lancez un scan gratuit avec FlowConsent.