Vous avez analysé votre site avec GTmetrix et vous avez vu des erreurs liées à Google Fonts? Vous n’êtes pas le seul. Les requêtes externes vers fonts.googleapis.com ralentissent le chargement, et les extensions de cache comme WP Rocket ou WP Fastest Cache ne peuvent pas compresser des ressources hébergées sur un serveur tiers.

Depuis 2022, il y a une autre raison: un tribunal allemand a jugé que le chargement dynamique de Google Fonts enfreint le RGPD, car les adresses IP des visiteurs sont transmises sans consentement à des serveurs de Google aux États-Unis. Héberger les polices en local résout trois problèmes à la fois: la performance selon GTmetrix, la conformité RGPD et le contrôle total de la mise en cache.

Voici un guide étape par étape, depuis le choix d’une police sur Google Fonts jusqu’à un rapport GTmetrix propre, sans aucune erreur de ressource externe.

💡 Aperçu rapide:

• Téléchargez les graisses de police dont vous avez besoin depuis Google Fonts
• Convertissez les.ttf en WOFF2 avec Transfonter ou google-webfonts-helper
• Envoyez les fichiers dans /wp-content/uploads/fonts/ via FTP
• Ajoutez les règles @font-face au CSS de votre thème et vérifiez le rendu
• Retestez votre site dans GTmetrix; les erreurs Google Fonts devraient avoir disparu

Pourquoi héberger les polices en local

Quand un navigateur charge une page, il interroge fonts.googleapis.com, récupère le CSS, puis va chercher les fichiers de police réels sur fonts.gstatic.com. Cela représente au moins deux résolutions DNS externes et deux sessions HTTP sur lesquelles vous n’avez aucun contrôle. Les extensions de cache sont impuissantes ici: vous ne pouvez ni compresser ni différer le chargement d’une ressource externe.

L’hébergement local change la donne. Les fichiers de police sont sur votre serveur, même domaine, même CDN, mêmes règles de cache. Le navigateur ne fait plus appel à des ressources externes, et GTmetrix comme PageSpeed Insights cessent de signaler des ressources tierces.

Et oui, le RGPD. En janvier 2022, le tribunal régional de Munich a jugé que le chargement dynamique de Google Fonts sans consentement de l’utilisateur viole le RGPD. Une vague de poursuites a déferlé sur l’Europe, et les propriétaires de sites ont commencé à passer massivement à l’hébergement local. Héberger vos polices vous-même est la solution la plus fiable.

Étape 1. Choisir une police sur Google Fonts

Rendez-vous sur Google Fonts et trouvez la police dont vous avez besoin. Dans ce guide, j’utilise Roboto, l’une des polices web les plus populaires, avec prise en charge du cyrillique.

Deux règles pour rester léger:

• Minimum de graisses. Chaque graisse (normal, gras, italique) est un fichier distinct et une requête distincte. Si votre design n’utilise que le normal et le gras, décochez le reste.
• Minimum de polices. Limitez-vous à une ou deux polices par site. Une troisième est déjà excessive pour la performance, aussi belle soit-elle.

J’ai choisi Roboto Regular (400) et Roboto Bold (700). C’est tout.

Étape 2. Télécharger la police

Sur la page de la police, cliquez sur le bouton «Download family». Google regroupera toutes les graisses dans une archive ZIP. La sélection des graisses n’a pas d’importance à ce stade; l’archive contient de toute façon la famille complète. Nous filtrerons plus tard.

Décompressez l’archive. Nous avons besoin de Roboto-Regular.ttf et Roboto-Bold.ttf.

Étape 3. Convertir les polices aux formats web

Les navigateurs n’utilisent pas directement le.ttf. Vous avez besoin des formats WOFF et WOFF2; ils sont compressés et se chargent plus vite. Il existe deux outils, tous deux gratuits.

Transfonter est un classique: allez sur transfonter.org, cliquez sur «Add fonts» et importez vos fichiers.ttf.

Laissez les paramètres par défaut; les formats WOFF et WOFF2 couvrent tous les navigateurs modernes. Le format EOT (pour les anciennes versions d'Internet Explorer) n'est plus nécessaire en 2026. Cliquez sur «Convert».

Google-webfonts-helper est une option plus moderne, spécifiquement conçue pour Google Fonts. Le service disponible sur gwfh.mranftl.com génère à la fois les fichiers WOFF2 et le code CSS prêt à l'emploi avec @font-face. Vous n'avez pas besoin de téléverser les polices sur un serveur tiers; tout se passe en local dans votre navigateur. Pour les polices sous licence et les typographies de marque, c'est un point important.

Quel outil choisir? Transfonter est plus simple pour une tâche ponctuelle. Google-webfonts-helper est plus pratique si vous changez souvent de polices ou si vous travaillez avec des typographies commerciales que vous préférez ne pas téléverser sur des serveurs externes.

Étape 4. Téléversez les polices web sur votre serveur

Après la conversion, téléchargez le fichier ZIP. Vous y trouverez les fichiers.woff et.woff2 pour chaque graisse. Pour Roboto Regular et Bold, vous obtenez 4 fichiers:

Téléversez-les via FTP ou le gestionnaire de fichiers de votre hébergement dans le dossier /wp-content/uploads/fonts/. Le chemin /wp-content/uploads/ a été choisi délibérément: les mises à jour du cœur de WordPress et du thème ne le modifient pas, contrairement au dossier du thème.

Après le téléversement, vérifiez en ouvrant un lien direct vers le fichier dans votre navigateur:

https://your-site.com/wp-content/uploads/fonts/Roboto-Regular.woff2

Le navigateur doit lancer le téléchargement. Si ce n'est pas le cas, vérifiez les permissions du dossier (elles doivent être à 755) et le chemin lui-même.

Étape 5. Ajoutez @font-face à votre CSS

L'archive ZIP de Transfonter contient un fichier stylesheet.css, un modèle prêt à l'emploi pour connecter la police. Ouvrez-le et copiez son contenu.

Collez le code tout en haut du fichier style.css de votre thème actif (ou custom.css si votre thème le permet). Utilisez les chemins vers les fichiers sur votre serveur de production, pas ceux de l'archive. Remplacez les URL relatives par des URL absolues:

Code original du fichier stylesheet.css:

1
src: url('Roboto-Bold.woff2') format('woff2'),
2
     url('Roboto-Bold.woff') format('woff');

Remplacez par:

1
src: url('https://your-site.com/wp-content/uploads/fonts/Roboto-Bold.woff2') format('woff2'),
2
     url('https://your-site.com/wp-content/uploads/fonts/Roboto-Bold.woff') format('woff');

Remplacez your-site.com par votre nom de domaine. Répétez l'opération pour chaque graisse.

Pour faciliter l'utilisation de la police dans votre balisage, ajoutez les classes d'habillage ci-dessous:

1
.roboto_font {
2
  font-family: "Roboto", "Arial", sans-serif;
3
}
4
 
5
.roboto_bold_font {
6
  font-family: "Roboto", "Arial", sans-serif;
7
  font-weight: bold;
8
}

Désormais, tout élément portant la classe roboto_font ou roboto_bold_font s'affichera en Roboto.

Étape 6. Vérifiez le rendu

Créez une page de test (ou ouvrez une page existante en mode brouillon) et collez ce code HTML dans l'éditeur de texte:

1
<h2>Default theme font</h2>
2
<h2 class="roboto_font">Roboto Regular — custom font</h2>
3
<h2 class="roboto_bold_font">Roboto Bold — bold weight</h2>

Ouvrez l'aperçu. Le premier titre utilise la police par défaut du thème; le deuxième et le troisième utilisent Roboto.

Si la police ne se charge pas, ouvrez la console du navigateur (F12 → Réseau) et vérifiez que les fichiers WOFF2 sont bien chargés depuis votre domaine, et non depuis fonts.gstatic.com. Le code de réponse doit être 200 et le type doit être font/woff2.

Étape 7. Définir la police par défaut

Pour appliquer Roboto sur l'ensemble du site sans ajouter de classes à chaque titre, ajoutez ceci dans style.css:

1
body {
2
  font-family: "Roboto", "Arial", sans-serif;
3
}

Attention: si votre thème utilise déjà une police personnalisée, repérez les lignes font-family dans style.css et remplacez-les. Le simple fait d'ajouter une règle body par-dessus une règle existante crée un conflit. Assurez-vous que les anciennes déclarations sont supprimées ou commentées.

Étape 8. Mettre en place une pile de polices de secours

Les Google Fonts ne sont pas des polices système. Si le navigateur ne peut pas les charger (visiteur hors ligne, bloqueur de publicité, problème temporaire), la page n'affichera aucun texte. La solution est une pile de polices.

Incorrect:

1
font-family: 'Roboto';

Correct, avec des polices de secours:

1
font-family: 'Roboto', Arial, sans-serif;

Le navigateur essaie Roboto. En cas d'échec, il bascule sur Arial. Pas d'Arial? Police sans-serif du système. La page reste toujours lisible, même si la police personnalisée ne se charge pas.

Étape 9. Retestez votre site avec GTmetrix

Relancez GTmetrix. La section «Waterfall» ne doit plus afficher de requêtes vers fonts.googleapis.com ou fonts.gstatic.com. L'erreur «Serve static assets with an efficient cache policy» pour les polices disparaît également, car ces ressources sont désormais sur votre serveur et mises en cache selon vos propres règles.

Si des erreurs persistent, consultez l'onglet Waterfall. Un thème ou un plugin (par exemple, Elementor) peut encore charger des polices depuis le CDN de Google. La section suivante vous aidera.

Alternative pour les moins patients: le plugin Local Google Fonts

Si vous ne voulez pas manipuler le FTP et le CSS, il existe le plugin Local Google Fonts. Il détecte automatiquement toutes les Google Fonts utilisées par votre thème et vos plugins, les télécharge et les sert depuis votre serveur.

Avantages: installez, activez, oubliez. Inconvénients: il ne fonctionne qu'avec les Google Fonts (pas les autres polices externes) et n'offre pas un contrôle fin sur les formats. Pour la plupart des sites WordPress, c'est largement suffisant.

Vidéo utile sur le sujet

En anglais, avec une démonstration visuelle de chaque étape, du choix d'une police au CSS final:

⁉️🤔 Foire aux questions

Est-il obligatoire d’héberger les polices soi-même en 2026?

D’un point de vue juridique, oui, si vous avez des visiteurs situés dans l’UE. Le tribunal de Munich a créé un précédent en 2022 et, depuis, des dizaines de juridictions allemandes l’ont confirmé: charger dynamiquement Google Fonts sans consentement constitue une violation du RGPD. Du point de vue des performances, c’est également oui: deux résolutions DNS supplémentaires et une ressource externe non mise en cache ne rendent pas votre site plus rapide. L’hébergement local des polices résout les deux problèmes en même temps. L’extension Local Google Fonts prend 5 minutes; la méthode manuelle avec Transfonter en prend 15. Choisissez selon votre disposition à utiliser un accès FTP.

Google-webfonts-helper ou Transfonter: lequel est le meilleur?

Pour la connexion ponctuelle d’une seule police, il n’y a quasiment aucune différence. Transfonter est plus simple: vous téléversez le.ttf, vous obtenez le WOFF2 et le CSS. Google-webfonts-helper est plus pratique quand vous changez souvent de polices: il ne téléverse pas les fichiers vers un serveur tiers et génère immédiatement une règle @font-face prête à l’emploi avec les bons chemins. Pour les polices sous licence commerciale, seul google-webfonts-helper convient.

Que faire si les polices ne s’affichent pas après le téléversement local?

Trois causes classiques. Premièrement, un chemin erroné dans url(): vérifiez que le lien s’ouvre dans un navigateur et renvoie bien un fichier, pas une erreur 404. Deuxièmement, le CORS: si les polices sont chargées depuis un CDN ou un sous-domaine, le serveur doit renvoyer l’en-tête Access-Control-Allow-Origin. Troisièmement, un conflit avec le thème: ouvrez les outils de développement (F12 → Onglet «Computed»), trouvez un élément utilisant votre police et regardez quelle font-family est réellement appliquée. Souvent, le thème la surcharge plus bas dans la cascade.

Puis-je héberger les polices sur un CDN plutôt que sur mon propre serveur?

Oui, mais le CDN doit être le vôtre. Le principe clé est que les polices doivent être servies depuis le même domaine (ou sous-domaine) que votre site, sans aucune requête interdomaine vers des serveurs tiers. Ainsi, la mise en cache fonctionne et le RGPD n’est pas enfreint.

Comment vérifier que les polices se chargent bien en local?

Ouvrez les outils de développement → Onglet Network → Filtre Font. Actualisez la page. Toutes les requêtes de polices doivent pointer vers votre domaine. Si vous voyez fonts.googleapis.com ou fonts.gstatic.com, un chargement externe subsiste quelque part. Il s’agit probablement d’un thème ou d’une extension qui l’utilise encore. Vérifiez les paramètres ou installez Local Google Fonts.

Que choisir: le téléversement manuel ou l’extension

Si vous avez lu jusqu’ici, vous vous souciez probablement des performances de votre site. Et c’est la bonne attitude. La différence entre «ça a l’air rapide» et «GTmetrix Grade A» tient souvent à de petits détails comme les polices externes.

Pour un résultat rapide, installez Local Google Fonts. Cinq minutes, et les requêtes externes vers Google disparaissent.

Pour un contrôle total des formats, de la mise en cache et des polices de secours, optez pour la méthode manuelle avec Transfonter ou google-webfonts-helper. Toujours 15 minutes, mais vous connaissez chaque fichier présent sur votre serveur.

Dans les deux cas, lancez un test GTmetrix avant et après. Les captures d’écran «avant/après» sont le meilleur moyen de confirmer que vous n’avez pas fait tout cela pour rien.