Comment auto-héberger les polices Google dans WordPress

Le chargement des polices Google depuis les serveurs de Google crée une connexion tierce qui transmet les adresses IP des visiteurs. Pour les sites accueillant des visiteurs de l’UE, cela soulève des préoccupations liées au RGPD. L’auto-hébergement élimine complètement cette connexion tout en vous donnant le contrôle sur la mise en cache et la distribution.

Ce guide couvre trois approches pour héberger les polices localement dans WordPress : la bibliothèque de polices native pour les thèmes en blocs, l’implémentation manuelle pour les thèmes classiques, et une brève note sur les alternatives via plugins.

Pourquoi auto-héberger les polices Google ?

Lorsque les visiteurs chargent votre site, leur navigateur récupère les polices depuis fonts.googleapis.com et fonts.gstatic.com. Chaque requête envoie leur adresse IP aux serveurs de Google.

L’auto-hébergement déplace les fichiers de polices vers votre serveur. Les avantages incluent :

• Conformité à la vie privée : Aucun transfert de données vers des tiers à documenter ou justifier
• Contrôle des performances : Définissez vos propres en-têtes de cache et utilisez le préchargement
• Fiabilité : Aucune dépendance envers des services externes

La différence de performance entre le CDN de Google et une configuration locale bien configurée est généralement minime. Le principal moteur pour la plupart des sites est la conformité au RGPD, pas la vitesse.

Thèmes en blocs : utilisez la bibliothèque de polices native

WordPress 6.5+ inclut une bibliothèque de polices qui télécharge et sert les polices localement. C’est l’approche la plus simple pour les thèmes en blocs.

Étapes :

1. Accédez à Apparence → Éditeur
2. Ouvrez Styles (coin supérieur droit) → Typographie
3. Cliquez sur Gérer les polices → Installer des polices
4. Recherchez votre police, sélectionnez les graisses dont vous avez besoin, et cliquez sur Installer

WordPress télécharge les fichiers WOFF2 dans wp-content/fonts/ et les enregistre dans la configuration de votre thème. Aucune connexion externe ne se produit après l’installation.

Limitations : Cela ne fonctionne qu’avec les thèmes en blocs. Les thèmes classiques nécessitent une implémentation manuelle.

Thèmes classiques : implémentation manuelle

Pour les thèmes classiques, vous devrez télécharger les polices et écrire le CSS vous-même.

Télécharger et convertir les fichiers de polices

1. Visitez Google Fonts, sélectionnez votre police et téléchargez-la
2. Si votre téléchargement inclut des fichiers TTF, convertissez-les en WOFF2 en utilisant google-webfonts-helper ou Transfonter
3. Téléversez les fichiers dans votre thème : wp-content/themes/votre-theme/fonts/

Enregistrer les polices avec CSS

Ajoutez ceci au fichier style.css de votre thème ou à une feuille de style personnalisée :

@font-face {
  font-family: 'Inter';
  src: url('./fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

Propriétés clés :

• font-display: swap : Affiche immédiatement le texte de secours, puis bascule lorsque la police se charge. Empêche le texte invisible.
• font-weight: 100 900 : Pour les polices variables, déclare toute la plage de graisses dans un seul fichier.

Pour les polices statiques, créez des règles @font-face séparées pour chaque graisse que vous utilisez.

Appliquer la police

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

Incluez toujours des polices système de secours.

Désactiver le chargement distant

Vérifiez qu’aucune police distante ne se charge en ouvrant les DevTools (F12), en allant dans l’onglet Réseau, en filtrant par Police, et en rechargeant. Recherchez les requêtes vers fonts.gstatic.com.

Si votre thème charge des polices Google à distance, vérifiez ses paramètres pour une option de désactivation. Sinon, vous devrez peut-être retirer la feuille de style de la file d’attente dans functions.php ou utiliser un plugin comme Disable and Remove Google Fonts.

Alternatives via plugins

Plusieurs plugins automatisent l’hébergement local des polices :

• OMGF (Optimize My Google Fonts) : Détecte et télécharge les polices automatiquement
• Local Google Fonts : Fonctionnalité similaire avec support des sous-ensembles
• WP Rocket : Inclut une option en un clic dans ses paramètres Média

Les plugins fonctionnent bien lorsque les thèmes ou les constructeurs de pages chargent les polices de manières difficiles à remplacer manuellement. Ils ne sont pas obligatoires — les méthodes ci-dessus fonctionnent sans eux.

Bonnes pratiques

Privilégiez WOFF2 : Il offre environ 30 % de compression supplémentaire par rapport à WOFF et bénéficie d’un support navigateur supérieur à 97 %. Ignorez les formats plus anciens sauf si vous devez supporter IE11.

Utilisez les polices variables quand elles sont disponibles : Un seul fichier couvre toutes les graisses, réduisant les requêtes HTTP.

Préchargez avec parcimonie : Ne préchargez que les polices utilisées au-dessus de la ligne de flottaison :

<link rel="preload" href="/fonts/inter-variable.woff2" as="font" type="font/woff2" crossorigin>

Incluez crossorigin conditionnellement : Ajoutez-le uniquement si votre serveur envoie les en-têtes CORS appropriés.

Évitez @import : Il bloque le rendu. Utilisez plutôt des balises <link> ou @font-face.

Conclusion

Pour les thèmes en blocs, la bibliothèque de polices WordPress gère tout — installez les polices via l’éditeur et c’est terminé. Pour les thèmes classiques, téléchargez les fichiers WOFF2, écrivez les règles @font-face, et vérifiez qu’aucune connexion distante ne subsiste.

L’auto-hébergement vous donne un contrôle total sur la distribution des polices et élimine les transferts de données vers des tiers. L’implémentation prend quelques minutes, et le résultat est un site plus propre et plus respectueux de la vie privée.

FAQ

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.