Google Fonts et performance WordPress : faut-il les auto-héberger en 2026 ?
Google Fonts est la bibliothèque de polices la plus utilisée sur le web. Mais chaque font chargée depuis fonts.googleapis.com ajoute une résolution DNS, une connexion TCP et un téléchargement externe à votre page. En 2026, l'auto-hébergement (self-hosting) est recommandé pour éliminer ces allers-retours et améliorer LCP, CLS et le TTFB des polices. Ce guide explique comment migrer en moins d'une heure.
Google Fonts est utilisé sur des millions de sites WordPress. Pratique, gratuit, vaste catalogue — mais performant ? Pas vraiment. Ce guide vous explique pourquoi et comment passer au self-hosting de vos polices pour améliorer vos Core Web Vitals.
L’impact performance de Google Fonts
Charger une police depuis Google Fonts implique :
- Résolution DNS de fonts.googleapis.com : 20 à 100 ms
- Connexion TCP + SSL vers Google : 50 à 150 ms
- Téléchargement du CSS de polices (fonts.googleapis.com/css2) : bloquant pour le rendu
- Résolution DNS de fonts.gstatic.com (où sont les fichiers .woff2) : 20 à 80 ms
- Téléchargement des fichiers woff2 : 10 à 80 ms par variante
Total : 100 à 400 ms de latence additionnelle uniquement pour charger votre police. Sur mobile en 4G, cela peut atteindre 600 ms.
Pourquoi Google Fonts cause du CLS
Quand la police tarde à charger, le navigateur affiche une police de fallback (Arial, Times…) puis swipe vers la police Google Fonts dès qu’elle est disponible. Si les deux polices ont des métriques différentes (hauteur de x, espacement…), le texte se redimensionne et déplace les éléments — c’est du FOUT (Flash of Unstyled Text) qui génère du CLS.
Solution 1 : auto-héberger les polices (recommandé)
L’auto-hébergement supprime les requêtes vers les domaines Google. La police est servie depuis votre propre serveur, avec les mêmes règles de cache que vos autres assets.
Étape 1 : télécharger les polices avec google-webfonts-helper
Rendez-vous sur gwfh.mranftl.com — choisissez votre police, sélectionnez les variantes (Regular 400, Bold 700), téléchargez le pack zip qui contient les fichiers .woff et .woff2.
Étape 2 : uploader les fichiers WordPress
Créez un dossier /wp-content/themes/votre-theme/assets/fonts/ et uploadez vos fichiers .woff2 et .woff via FTP ou via le gestionnaire de fichiers de votre hébergeur.
Étape 3 : déclarer les polices en CSS
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/wp-content/themes/montheme/assets/fonts/inter-v13-latin-regular.woff2') format('woff2'),
url('/wp-content/themes/montheme/assets/fonts/inter-v13-latin-regular.woff') format('woff');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/wp-content/themes/montheme/assets/fonts/inter-v13-latin-700.woff2') format('woff2'),
url('/wp-content/themes/montheme/assets/fonts/inter-v13-latin-700.woff') format('woff');
}Étape 4 : supprimer l’enqueue Google Fonts WordPress
Cherchez dans votre functions.php l’enqueue de Google Fonts et supprimez-le :
// Supprimer l'enqueue Google Fonts du thème
add_action('wp_enqueue_scripts', function() {
wp_dequeue_style('google-fonts'); // Adapter le handle à votre thème
}, 20);Solution 2 : preconnect + preload (amélioration sans migration)
Si vous ne pouvez pas self-héberger maintenant, au minimum ajoutez les hints de ressource dans le <head> de votre thème :
<!-- Anticiper la connexion aux domaines Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Précharger la feuille de style des polices -->
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"></noscript>Solution 3 : passer aux polices système
La solution la plus radicale et la plus performante : ne pas charger de police externe du tout. Utilisez la stack de polices système :
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
}L’utilisateur voit la police native de son OS (San Francisco sur Mac/iOS, Segoe UI sur Windows, Roboto sur Android). Aucun chargement, aucun CLS, TTFB des polices = 0 ms. Le sacrifice esthétique est minimal sur les sites orientés performance.
Comparatif des 3 approches
| Approche | LCP impact | CLS impact | Effort | Rendu visuel |
|---|---|---|---|---|
| Google Fonts standard | -150 à -400 ms | Risque élevé | 0 | Contrôlé |
| Preconnect + preload | -50 à -100 ms | Risque réduit | Faible | Identique |
| Self-hosting | 0 (optimal) | Risque minimal | Moyen (1h) | Identique |
| Polices système | 0 (optimal) | 0 | Faible | Variable par OS |
Questions fréquentes sur Google Fonts WordPress
L’auto-hébergement Google Fonts est-il légal en 2026 ?
Oui, les polices Google Fonts sont sous licence OFL (Open Font License) ou Apache 2.0, qui autorisent explicitement la redistribution et l’hébergement sur vos propres serveurs. Depuis l’arrêt d’un tribunal allemand en 2022, l’auto-hébergement est même recommandé pour la conformité RGPD (évite le transfert d’IP vers Google).
Comment vérifier que Google Fonts ne se charge plus depuis Google ?
Chrome DevTools → Network → filtrez par « Font » → rechargez la page. Si vous voyez des requêtes vers fonts.gstatic.com, Google Fonts est encore actif. Toutes les polices doivent pointer vers votre propre domaine après la migration.
Font-display: swap vs font-display: optional — lequel choisir ?
swap affiche toujours votre police Google/custom mais cause du CLS si la police tarde. optional utilise la police uniquement si elle est déjà en cache — aucun CLS mais la police système à la première visite. Pour un site où le design compte, swap avec l’auto-hébergement (polices rapides = moins de CLS) est le meilleur compromis. optional est parfait pour les sites orientés performance pure.