Intégrer Google Fonts localement

Intégrer Google Fonts localement : charger plus vite et réduire les risques de confidentialité

De nombreux thèmes WordPress, constructeurs de pages (page builders) et extensions utilisent Google Fonts pour afficher des polices de caractères modernes et lisibles. Cependant, ces polices sont souvent chargées de manière dynamique directement depuis les serveurs de Google. Cela signifie que lors de la visite de votre site, le navigateur de l'internaute peut établir une connexion avec Google pour récupérer les fichiers de police.

Cette intégration externe présente deux inconvénients potentiels. Premièrement, elle peut influencer le temps de chargement en créant des requêtes externes supplémentaires. Deuxièmement, elle peut poser problème en matière de protection des données, car lors de la récupération des polices, des informations techniques telles que l'adresse IP du visiteur peuvent être transmises à Google.

Que sont les Google Fonts ?

Google Fonts est une vaste collection de polices de caractères utilisables gratuitement. De nombreux thèmes WordPress et constructeurs de pages y ont recours car ils permettent de mettre en œuvre rapidement un design moderne. Des polices comme Roboto, Open Sans, Lato, Montserrat ou Poppins sont utilisées sur de nombreux sites.

Techniquement, il existe deux manières fondamentales d'intégrer ces polices :

• Intégration dynamique : les fichiers de police sont chargés depuis les serveurs de Google lors de l'accès à la page.
• Intégration locale : les fichiers de police se trouvent sur votre propre hébergement web et sont distribués depuis votre propre domaine.

Du point de vue de la protection des données et du contrôle, l'intégration locale est souvent le meilleur choix, en particulier pour les sites web en Suisse ou accueillant des visiteurs de l'espace européen.

Pourquoi les Google Fonts externes peuvent être problématiques

Lorsqu'un site web charge Google Fonts directement depuis Google, une connexion est établie avec les serveurs de Google lors de l'ouverture de la page. Des données techniques peuvent alors être transmises. Dans de nombreux cas, cela inclut l'adresse IP du visiteur.

En Allemagne, l'intégration dynamique de Google Fonts est devenue particulièrement célèbre suite à un jugement du tribunal régional de Munich I (Landgericht München I). Le tribunal a considéré la transmission non autorisée de l'adresse IP à Google dans ce cas précis comme problématique. Les autorités de protection des données ont également conseillé aux exploitants de sites de vérifier l'intégration de Google Fonts et, si nécessaire, de la mettre en œuvre localement.

Pour les exploitants de sites suisses, la loi révisée sur la protection des données (nLPD) est également pertinente. Si votre site s'adresse également à des visiteurs de l'UE ou de l'EEE, le RGPD peut en outre jouer un rôle.

Avantages des polices hébergées localement

En enregistrant Google Fonts localement sur votre propre hébergement web, vous conservez davantage de contrôle sur la distribution de vos polices. Les polices sont alors chargées directement depuis votre propre domaine, au lieu des serveurs externes de Google.

Cela offre plusieurs avantages :

• Moins de connexions externes : le navigateur n'a pas besoin de récupérer des fichiers de police chez Google.
• Meilleur contrôle de la protection des données : aucune requête directe vers Google Fonts n'a lieu lors du chargement des polices.
• Distribution plus stable : les fichiers de police se trouvent sur votre propre hébergement.
• Avantages potentiels en termes de performance : moins de résolutions DNS et d'établissements de connexions externes peuvent améliorer les temps de chargement.
• Meilleure traçabilité technique : vous savez plus précisément quels fichiers sont chargés par votre site.

L'avantage réel en termes de vitesse dépend toutefois de la configuration concrète. Une police externe bien mise en cache peut se charger rapidement, tandis que des polices locales mal intégrées peuvent également ralentir le site. Une mise en œuvre technique propre est décisive.

1. Vérifier si votre site charge Google Fonts de manière externe

Avant de modifier quoi que ce soit, vous devriez vérifier si votre site charge effectivement Google Fonts directement depuis Google. Vous pouvez le constater de plusieurs manières.

Une possibilité simple est d'utiliser la console de développement du navigateur :

1. Ouvrez votre site dans le navigateur.
2. Ouvrez les outils de développement, par exemple avec F12 ou par un clic droit et Inspecter.
3. Allez dans l'onglet Réseau (Network).
4. Rechargez la page.
5. Recherchez des requêtes vers fonts.googleapis.com ou fonts.gstatic.com.

Si de telles requêtes apparaissent, les Google Fonts sont probablement chargées de manière externe. Vérifiez non seulement la page d'accueil, mais aussi les pages secondaires importantes, les pages d'atterrissage, les articles de blog et les pages de boutique.

2. Méthode A : héberger Google Fonts localement via une extension

Pour de nombreux utilisateurs de WordPress, une extension est le moyen le plus simple. Des extensions comme OMGF | Host Google Fonts Locally ou des solutions comparables peuvent scanner votre site à la recherche de Google Fonts intégrées de manière externe et tenter de les mettre à disposition localement.

Le déroulement typique est le suivant :

1. Installez une extension appropriée pour les Google Fonts locales.
2. Lancez le scan du site.
3. Faites enregistrer localement les polices trouvées.
4. Activez l'option permettant de remplacer ou de bloquer les requêtes externes vers Google Fonts.
5. Videz le cache du site web.
6. Vérifiez à nouveau s'il existe encore des connexions vers Google Fonts.

Cette méthode est particulièrement pratique si vous ne souhaitez pas travailler directement avec les fichiers CSS, les thèmes enfants (child themes) ou le FTP.

3. Méthode B : utiliser Google Fonts localement dans Elementor

Si vous utilisez Elementor, vous pouvez télécharger vos propres polices et les utiliser dans vos designs. Cette fonction est particulièrement utile si vous souhaitez mettre à disposition localement des polices spécifiques.

Le déroulement recommandé :

1. Téléchargez les fichiers de police nécessaires au format moderne WOFF2.
2. Dans le tableau de bord WordPress, ouvrez la zone dédiée aux polices personnalisées d'Elementor.
3. Téléchargez les fichiers de police.
4. Attribuez les polices aux éléments Elementor souhaités.
5. Désactivez les connexions Google Fonts externes dans Elementor, le thème ou les extensions supplémentaires.
6. Videz le cache et les fichiers CSS optimisés.
7. Vérifiez le site avec les outils de développement du navigateur.

Selon la version d'Elementor et la licence, les fonctions disponibles peuvent différer. Vérifiez donc quelles options sont réellement présentes dans votre installation.

4. Méthode C : intégrer Google Fonts manuellement localement

Pour les utilisateurs techniquement expérimentés, une intégration manuelle est également possible. Pour cela, vous téléchargez les fichiers de police nécessaires, les enregistrez dans votre thème ou thème enfant et les intégrez via CSS.

Un exemple simple d'intégration locale avec @font-face :

@font-face {
  font-family: 'Open Sans';
  src: url('/wp-content/themes/votre-child-theme/fonts/open-sans.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Open Sans', Arial, sans-serif;
}

La propriété font-display: swap; permet d'afficher d'abord une police de remplacement jusqu'à ce que la police web réelle soit chargée. Cela peut améliorer le temps de chargement perçu et évite que les textes ne restent invisibles pendant le processus de chargement.

5. Ne charger que les variantes de polices nécessaires

Une erreur de performance fréquente est de charger trop de variantes de polices. De nombreux sites utilisent par exemple une famille de polices avec de nombreuses variantes : 300, 400, 500, 600, 700, italique et d'autres combinaisons. Chaque variante peut signifier un fichier de police supplémentaire.

En pratique, quelques variantes suffisent souvent :

• 400 : texte courant normal
• 600 ou 700 : titres ou mises en évidence
• italic : seulement si l'écriture cursive est réellement utilisée

Moins il y a de fichiers de police chargés, plus la page est légère. Cela améliore non seulement le temps de chargement, mais simplifie aussi la maintenance.

6. Privilégier le format WOFF2

Pour les sites web modernes, le WOFF2 est généralement le format de police à privilégier. Il est bien compressé et largement supporté par les navigateurs modernes. Les formats plus anciens comme TTF ou EOT ne sont généralement plus nécessaires pour les sites actuels, à moins que vous ne deviez supporter de très vieux navigateurs.

Lorsque vous téléchargez des fichiers de polices localement, veillez donc à utiliser des fichiers WOFF2 si possible. Cela permet d'économiser du volume de données et améliore la distribution.

7. Vider le cache après la modification

Après le passage aux Google Fonts locales, vous devriez vider tous les caches pertinents. Cela inclut :

• Le cache WordPress
• Le cache de votre extension de performance
• Le cache côté serveur, s'il est actif
• Le cache CDN, s'il est utilisé
• Le cache du navigateur lors des tests

Sans vidage de cache, il peut arriver que d'anciens fichiers CSS ou des requêtes de polices externes continuent d'être distribués. On a alors l'impression que la modification n'a pas fonctionné.

8. Bien tester après la modification

Après l'intégration locale, vous devriez vérifier soigneusement votre site. Ne faites pas attention qu'à la page d'accueil, mais aussi aux pages créées avec des constructeurs de pages, des formulaires, des extensions de boutique ou des modèles (templates) particuliers.

Vérifiez en particulier :

• Tous les textes sont-ils affichés correctement ?
• Y a-t-il des décalages de mise en page visibles ?
• Les bonnes polices de caractères sont-elles utilisées ?
• Y a-t-il encore des requêtes vers fonts.googleapis.com ?
• Y a-t-il encore des requêtes vers fonts.gstatic.com ?
• L'affichage mobile fonctionne-t-il correctement ?
• Le cache a-t-il été entièrement vidé ?

Si des requêtes Google Fonts sont toujours visibles, la cause peut se trouver dans votre thème, votre constructeur de pages, une extension ou un code tiers intégré.

9. Erreurs typiques avec les Google Fonts locales

Lors du changement, des erreurs similaires surviennent fréquemment. Beaucoup d'entre elles peuvent être évitées en procédant systématiquement.

• Trop de variantes de polices : les graisses inutiles ralentissent la page.
• Mauvais chemins de fichiers : le CSS renvoie à des fichiers de police qui ne sont pas trouvés.
• Polices externes non désactivées : les polices locales sont présentes, mais les Google Fonts continuent d'être chargées.
• Cache non vidé : les anciens fichiers CSS restent actifs.
• Le thème recharge les polices : le thème apporte ses propres réglages Google Fonts.
• Le constructeur de pages charge des polices séparées : Elementor, Divi ou d'autres constructeurs peuvent avoir leurs propres réglages de polices.
• Confusion entre icônes et polices : les polices d'icônes comme Font Awesome sont un sujet à part et doivent être vérifiées séparément.

10. Performance : qu'apporte réellement l'intégration locale des polices ?

L'hébergement local des polices peut améliorer le temps de chargement car moins de connexions externes doivent être établies. Cela peut faire une différence notable, surtout pour les sites ayant de nombreuses ressources externes.

L'effet réel dépend toutefois de plusieurs facteurs :

• Nombre de polices chargées
• Nombre de variantes de polices
• Configuration du cache
• Vitesse du serveur
• Structure du thème et du constructeur de pages
• Format de fichier utilisé
• Optimisation du CSS et du JavaScript

Une amélioration forfaitaire en millisecondes ne peut donc pas être promise sérieusement. Dans de nombreux cas, l'avantage est toutefois mesurable, surtout si plusieurs requêtes de polices externes existaient auparavant.

11. SEO et Core Web Vitals

Les polices influencent l'expérience utilisateur. Si les textes ne deviennent visibles que tardivement ou si la mise en page se décale pendant le chargement, cela peut gêner les visiteurs. De tels effets peuvent également influencer des indicateurs comme le temps de chargement, le Cumulative Layout Shift ou la vitesse perçue.

Pour le SEO, l'intégration locale des polices n'est pas une astuce de classement directe. Elle peut toutefois faire partie d'une optimisation technique propre. Un site rapide, stable et respectueux de la confidentialité offre de meilleures conditions pour la satisfaction des utilisateurs et la qualité aux yeux des moteurs de recherche.

12. GEO : pourquoi une qualité technique claire compte aussi pour les systèmes de recherche par IA

Le GEO, c'est-à-dire l'optimisation pour les systèmes de recherche générative, ne concerne pas seulement les textes. La qualité technique d'un site joue également un rôle, car les contenus doivent être accessibles de manière fiable, rapides à charger et proprement structurés.

Un site web avec moins de dépendances externes, une distribution stable et une structure technique claire est plus robuste. Cela aide non seulement les visiteurs, mais aussi les moteurs de recherche et les systèmes automatisés à appréhender vos contenus.

Les Google Fonts locales sont donc une petite brique, mais judicieuse, d'une optimisation globale du site web.

Procédure recommandée

1. Vérifier le site : recherchez les requêtes vers fonts.googleapis.com et fonts.gstatic.com.
2. Choisir la méthode : extension, fonction du constructeur de pages ou intégration manuelle.
3. N'utiliser que les polices nécessaires : réduisez les familles et variantes de polices.
4. Utiliser WOFF2 : utilisez des fichiers de police modernes et compressés.
5. Désactiver le chargement des polices externes : vérifiez le thème, le constructeur de pages et les extensions.
6. Vider le cache : effacez les caches WordPress, d'extension, du serveur et du CDN.
7. Tester à nouveau : contrôlez les requêtes réseau et l'affichage.
8. Vérifier la politique de confidentialité : mettez à jour les mentions si les services changent.

Questions fréquentes sur les Google Fonts locales

Pourquoi devrais-je intégrer Google Fonts localement ?

Par l'intégration locale, vous évitez que les polices ne soient chargées directement depuis les serveurs de Google lors de l'ouverture de la page. Cela réduit les connexions externes et peut apporter des avantages en termes de protection des données et de performance.

Mon site est-il automatiquement conforme à la loi avec les Google Fonts locales ?

Pas automatiquement. Les polices locales ne résolvent que le problème spécifique des requêtes externes vers Google Fonts. D'autres services comme Analytics, Maps, YouTube, reCAPTCHA, les scripts externes ou les cookies doivent être vérifiés séparément.

Comment savoir si des Google Fonts sont encore chargées de manière externe ?

Ouvrez les outils de développement de votre navigateur, allez dans l'onglet réseau et rechargez la page. Recherchez des requêtes vers fonts.googleapis.com ou fonts.gstatic.com.

Puis-je utiliser Google Fonts localement avec Elementor ?

Oui, Elementor propose selon la version des fonctions pour les polices personnalisées. En complément, vous devriez vérifier si Elementor, votre thème ou d'autres extensions continuent de charger des Google Fonts externes.

Quel format de police dois-je utiliser ?

Pour les sites web modernes, le WOFF2 est généralement le meilleur choix car il est bien compressé et largement supporté par les navigateurs actuels.

L'intégration locale des polices améliore-t-elle automatiquement mon classement Google ?

Non, pas directement. Elle peut toutefois améliorer le temps de chargement, la stabilité et l'expérience utilisateur. Ces facteurs techniques peuvent contribuer indirectement à la qualité de votre site.

Dois-je vider le cache après la modification ?

Oui. Videz tous les caches pertinents après la modification afin que les anciens fichiers CSS et les renvois vers des polices externes ne soient plus distribués.