Lorsque votre site WordPress charge Google Fonts depuis fonts.googleapis.com, le navigateur de chaque visiteur envoie une requête aux serveurs de Google. Cette requête inclut l'adresse IP du visiteur, son user agent, l'URL référente et d'autres métadonnées. Google reçoit ces données pour chaque chargement de page, ce qui crée une préoccupation importante en matière de vie privée au regard du droit européen de la protection des données.
Pourquoi Google Fonts pose un problème RGPD
En janvier 2022, un tribunal allemand (LG Munich, affaire 3 O 17493/20) a jugé que l'intégration de Google Fonts via le lien externe standard constitue une violation du RGPD. Le tribunal a estimé que la transmission de l'adresse IP d'un visiteur à Google sans consentement préalable viole l'article 6, paragraphe 1, du RGPD, car l'exploitant du site n'a aucun intérêt légitime qui prévaut sur le droit de l'utilisateur à la protection des données. L'exploitant du site a été condamné à verser des dommages-intérêts au visiteur concerné.
Cette décision a créé un précédent clair dans toute l'UE. Depuis, plusieurs cabinets d'avocats ont envoyé des lettres d'avertissement de masse aux exploitants de sites qui chargent encore Google Fonts en externe. La solution est simple : hébergez les fichiers de polices sur votre propre serveur afin qu'aucune donnée ne soit transmise à Google. Cette approche est entièrement conforme au RGPD, élimine le risque juridique et améliore souvent aussi la vitesse de chargement.
Comment télécharger Google Fonts pour l'auto-hébergement
Le moyen le plus simple d'obtenir les bons fichiers de polices avec le CSS correct est l'outil Google Webfonts Helper de Mario Ranftl. Voici comment l'utiliser :
- Ouvrez Google Webfonts Helper et recherchez la police dont vous avez besoin (par exemple, « Open Sans », « Roboto », « Lato »).
- Sélectionnez les jeux de caractères dont vous avez besoin. Pour la plupart des sites européens, « latin » et « latin-ext » suffisent. N'ajoutez « cyrillic » ou « greek » que si votre contenu utilise réellement ces écritures.
- Choisissez les graisses et styles de police que vous utilisez sur votre site. Les sélections courantes sont 400 (regular), 400 italic, 700 (bold) et 700 italic. Évitez de sélectionner des graisses que vous n'utilisez pas réellement, car chacune ajoute du poids au fichier.
- L'outil génère des règles CSS
@font-faceprêtes à l'emploi. Copiez-les. Vous pouvez personnaliser le préfixe du chemin de fichier pour qu'il corresponde à la structure de votre serveur. - Téléchargez le fichier zip contenant tous les fichiers de polices sélectionnés dans des formats modernes (woff2 et woff).
Auto-hébergement manuel étape par étape
Étape 1 : Téléverser les fichiers de polices
Créez un répertoire fonts dans le dossier de votre thème ou de votre thème enfant et téléversez-y les fichiers de polices téléchargés :
/wp-content/themes/your-theme/fonts/
open-sans-v40-latin-regular.woff2
open-sans-v40-latin-regular.woff
open-sans-v40-latin-700.woff2
open-sans-v40-latin-700.woffSi vous utilisez un thème enfant, placez les polices dans le répertoire du thème enfant afin qu'elles survivent aux mises à jour du thème parent.
Étape 2 : Ajouter le CSS @font-face
Ajoutez le CSS généré par Google Webfonts Helper à la feuille de style de votre thème ou à un fichier CSS personnalisé. Veillez à définir font-display: swap afin que le texte reste visible pendant le chargement des polices :
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'),
url('../fonts/open-sans-v40-latin-regular.woff') format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/open-sans-v40-latin-700.woff2') format('woff2'),
url('../fonts/open-sans-v40-latin-700.woff') format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('../fonts/open-sans-v40-latin-italic.woff2') format('woff2'),
url('../fonts/open-sans-v40-latin-italic.woff') format('woff');
}Étape 3 : Supprimer la référence externe à Google Fonts
Vous devez empêcher votre thème de charger les polices depuis fonts.googleapis.com. Cela se fait généralement en retirant le handle de style. Le nom du handle varie selon le thème, vous devrez donc peut-être inspecter votre source HTML pour le trouver :
add_action('wp_enqueue_scripts', function() {
// Noms de handles courants utilisés par les thèmes
wp_dequeue_style('google-fonts');
wp_deregister_style('google-fonts');
// Certains thèmes utilisent des handles différents
wp_dequeue_style('flavor-google-fonts');
wp_deregister_style('flavor-google-fonts');
// Thème Divi
wp_dequeue_style('divi-fonts');
wp_deregister_style('divi-fonts');
}, 100);La priorité 100 garantit que ce code s'exécute après que le thème ait mis ses styles en file d'attente. Si le thème utilise un nom de handle différent, vérifiez la source de votre page pour une balise <link> contenant fonts.googleapis.com et notez l'attribut id (retirez le suffixe -css pour obtenir le nom du handle).
Certains thèmes codent en dur le lien Google Fonts directement dans l'en-tête du modèle au lieu d'utiliser wp_enqueue_style. Dans ce cas, vous devrez peut-être modifier le modèle d'en-tête ou utiliser un thème enfant pour le surcharger.
Auto-hébergement avec une extension
Si vous préférez ne pas gérer manuellement les fichiers de polices et le CSS, des extensions peuvent automatiser tout le processus :
- OMGF (Optimize My Google Fonts) : détecte automatiquement les Google Fonts chargées sur votre site, télécharge les fichiers de polices sur votre serveur, génère le CSS local
@font-faceet supprime les références externes à Google Fonts. Elle précharge également les polices pour de meilleures performances et gère le cache busting. C'est l'option la plus populaire pour cette tâche spécifique. - Asset CleanUp (Pro) : en plus de l'optimisation générale des ressources, elle peut détecter et héberger localement Google Fonts. Elle offre plus de contrôle sur les pages qui chargent quelles polices, ce qui est utile pour les sites où différentes sections utilisent une typographie différente.
- Perfmatters : inclut une fonctionnalité Google Fonts locales aux côtés de ses autres outils d'optimisation des performances. Bon choix si vous voulez une seule extension pour plusieurs améliorations de performance.
Comprendre font-display: swap
La propriété font-display: swap dans vos règles @font-face est importante pour l'expérience utilisateur et les Core Web Vitals. Sans elle, les navigateurs peuvent masquer le texte jusqu'à ce que la police soit chargée (phénomène connu sous le nom de FOIT, ou Flash of Invisible Text). Avec swap, le navigateur affiche immédiatement le texte en utilisant une police système de secours, puis la remplace une fois la police personnalisée chargée. Cela évite que les décalages de mise en page ne soient comptabilisés dans votre score Cumulative Layout Shift (CLS) et garantit que le contenu est lisible même sur les connexions lentes.
Sous-ensembles de polices pour de meilleures performances
Si vous voulez aller plus loin dans l'optimisation, envisagez de créer des sous-ensembles de vos polices. Un fichier complet « Latin Extended » peut inclure des caractères pour des langues que vous n'utilisez jamais sur votre site. Des outils comme fonttools (pyftsubset) ou Everything Fonts Subsetter peuvent supprimer les caractères inutilisés, réduisant considérablement la taille du fichier. Par exemple, un fichier de police couvrant tout le Latin Extended peut faire 25 Ko, mais un sous-ensemble contenant uniquement les caractères utilisés en français et en allemand pourrait faire moins de 15 Ko. Pour la plupart des sites, les jeux de caractères proposés par Google Webfonts Helper constituent déjà un sous-ensemble raisonnable, cette étape est donc facultative.
Vérifier qu'il ne reste aucune requête de polices externe
Après avoir effectué vos modifications, il est important de vérifier qu'aucune requête vers fonts.googleapis.com ou fonts.gstatic.com ne subsiste. Ouvrez les outils de développement de votre navigateur (F12), allez dans l'onglet Réseau, rechargez la page et filtrez par « font » ou recherchez « googleapis ». Vérifiez plusieurs pages, pas seulement la page d'accueil, car certains thèmes chargent des polices différentes sur différents modèles de pages.
Vérifiez également les Google Fonts chargées par les extensions. Certains constructeurs de pages, extensions de slider ou extensions de formulaire chargent leurs propres Google Fonts indépendamment du thème. Vous devrez peut-être vérifier les paramètres de chaque extension pour une option « désactiver Google Fonts » ou « charger les polices localement ».
Vérifier avec InspectWP
Lancez une nouvelle analyse InspectWP après vos modifications. La section RGPD de votre rapport indiquera s'il subsiste des requêtes vers les serveurs Google Fonts. InspectWP vérifie les connexions à la fois vers fonts.googleapis.com (le CSS) et fonts.gstatic.com (les fichiers de polices eux-mêmes). Si toutes les polices sont correctement auto-hébergées, aucun de ces domaines ne devrait apparaître dans la liste des ressources externes.