NDL

PARTAGE

Le 15 mai 2025 | Update 16 juillet 2025 | 4 mins read

Héberger localement des polices Google fonts sur Wordpress sans plugin

Introduction

Quand j'ai commencé le développement de ce site, je cherchais une police de caractère permettant une bonne lisibilité et une police atypique pour le logo. Je me suis dirigé vers les polices google fonts. Ne nous cachons pas, le site de google permet facilement d'essayer des polices et de générer un lien qu'on peut facilement ajouter à l'entête de n'importe quel site web. Facile et rapide.

Cdn ou Hébergement Local

CDN

✅ Avantages

  • Simplicité d’intégration : Un simple lien dans le permet de charger la police.

  • Mise en cache partagée : Si un visiteur a déjà visité un autre site utilisant la même police via le CDN de Google, elle est déjà dans son cache, donc chargement plus rapide.

  • Toujours à jour : Google garantit une disponibilité optimale et peut mettre à jour les fichiers si nécessaire (amélioration de la compression ou des formats, par exemple).

❌ Inconvénients

  • Problèmes de confidentialité (RGPD) : Les polices chargées via le CDN contactent les serveurs de Google, ce qui peut entraîner la collecte d’adresses IP sans consentement explicite.

  • Performance variable : Si les serveurs Google sont lents dans certaines régions, le chargement des polices peut être impacté.

Local (.woff2)

✅ Avantages

  • Conformité RGPD : Aucune requête externe n’est envoyée à Google, ce qui respecte la vie privée des visiteurs.

  • Performance maîtrisée : Les fichiers sont hébergés sur votre propre serveur, ce qui permet un chargement plus prévisible (surtout si votre serveur est optimisé).

  • Contrôle complet : Vous pouvez sous-ensemble la police, la compresser davantage, ou ne charger que les variantes nécessaires.

❌ Inconvénients

  • Mise en œuvre technique : Il faut télécharger les fichiers .woff2, générer les bonnes règles CSS (@font-face), et les intégrer dans le thème ou via un fichier CSS.

  • Pas de cache partagé entre sites : Chaque visiteur devra télécharger la police spécifiquement pour votre site.

  • Maintenance : Si une version de la police évolue (corrections de bugs, nouveaux caractères), il faudra la mettre à jour manuellement.

Conversion en fichier woff2

Le site de google ne permet pas de télécharger directement des fichiers woff2 (format moderne). Pour cela, il faut passer par un site web comme : https://gwfh.mranftl.com/fonts

Il suffit de rechercher les polices qu'on utilise. Ici par exemple la police Erica One.

Il y a 2 actions à réaliser pour chaque police, télécharger le fichier zip qui va contenir le ou les fichiers .woff2.

Copier coller le code css dans son fichier de style ou tout coller dans un fichier fonts.css que nous créerons pour l'occasion.

Intégration Wordpress

Ajout des Fonts

J'ai créé un dossier fonts sur mon theme wordpress. Ce dossier contient un sous dossier par police de caractère et un fichier fonts.css. Apres avoir copié collé le css généré par le site web qu'on a vu précédemment, il faut modifier le chemin d'accès à nos fichiers woff2. Voici mon organisation :

Charger les fonts

Avant dernière étape pour utiliser nos fonts hébergées localement, charger le fichier fonts.css via la fonction wordpress "wp_enqueue_style". Ce code doit être ajouté dans le fichier functions.php de votre thème ou thème enfant selon votre configuration.

wp_enqueue_style('local-fonts', get_template_directory_uri() . '/fonts/fonts.css', array(), null, null);

Et la dernière étape, désactiver le chargement des fonts via le CDN de google.

#wp_enqueue_style('google-font', 'https://fonts.googleapis.com/css2?family=Erica+One&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap', null, null);

Tester

Tester votre site pour vérifier que vos "nouvelles polices" de caractère sont bien chargées. Vérifier que la source est bien local et non plus depuis le Cdn de google. Si votre site wordpress utilise un gestionnaire de cache. Il se peut qu'il y un délais avant que tout soit à jour coté client.

Performance

Je gagne quelques points au test intégré de google chrome. C'est toujours ca de mieux.

Avant

Après

Résumé

Je ne dépend plus de google pour gérer les polices de mon site. Ou plutôt, j'ai maintenant une résilience si google décide de supprimer cette police. Autre point positif, les tests de performance de chargement du site sont maintenant meilleurs.