Comment héberger localement des polices Google Fonts avec WordPress ?

Charger les polices Google depuis votre propre serveur vous offrira de meilleures performances et un respect de la vie privée de vos visiteurs. Explications détaillées dans ce tutoriel accessible.

Pourquoi héberger localement les polices Google de mon thème ?

Je vous livre les deux raisons principales pour vous convaincre de privilégier cette approche.

Des performances d’affichage supérieures

La première raison à laquelle les concepteurs de sites Web devraient penser : la performance.

Cela peut paraître déroutant pour la plupart d’entre vous tant il est rabâché à longueur de tutoriels qu’il vaut mieux utiliser des Content Delivery Network – les fameux CDN, pour améliorer le temps de chargement. L’idée est la suivante : délivrer la ressource comme des images ou ici des polices au plus près de la situation géographique de mon visiteur.

Cette approche est pertinente si votre audience est mondiale, avec un trafic élevé. Je ne parle pas de sites avec quelques centaines de visiteurs par jour pour lesquels les outils d’analyse vont remonter quelques visites depuis un pays étranger. Je fais référence à des sites connus avec des volumes de trafic qui se chiffre en centaines de milliers de visiteurs par mois et qui sont présents sur plusieurs continents.

Protégez votre site WordPress

Vos données sont précieuses,
ne prenez pas le risque de tout perdre.

Confiez-nous votre maintenance !

Obtenir un audit gratuit

Si votre activité professionnelle est localisée en France et propose ses services en Europe de l’Ouest alors vous n’avez aucun intérêt à avoir recours à un CDN. C’est d’ailleurs bien souvent contre-performant car :

• Vous allez émettre une requête sur un hôte différent de votre nom de domaine : c’est toujours plus long d’autant plus que la plupart des CDN que vous utiliserez ne sont pas hébergés en France ce qui vous éloigne géographiquement de la destination finale ;
• Vous ajoutez une dépendance à un serveur tiers : il n’est pas rare que le CDN soient lents à répondre ce qui ralentit globalement le temps de chargement de toutes vos pages ;
• Vous augmentez le niveau de risques : si le CDN est piraté, du code malveillant pourra s’afficher sur votre site ;

Toutefois, je souhaite nuancer mon propos sur l’usage des CDN et, en particulier, pour l’affichage de Google Fonts. Les serveurs de Google sont très performants et il y a fort à parier que vous utilisiez des polices populaires comme Open Sans ou Roboto. Si tel est le cas, il y a fort à parier que vos visiteurs disposent déjà d’une version en cache obtenue au cours d’une visite sur un autre site.

Dès lors, le gain de performance sera proche de zéro.

C’est pourquoi, le recours à un CDN doit être réellement justifié sur la base de vos besoins. Il vous faudra mener une analyse comparative avant et après les changements techniques opérés pour mesurer l’impact réel sur vos performances. Parlez-en à votre prestataire Web.

Des contraintes légales liées au RGPD

En janvier 2022, une cour de justice en Allemagne a statué que l’affichage de polices hébergées chez Google constituait une violation du Règlement Général sur la Protection des Données – le fameux RGPD. En effet, il a été démontré que l’adresse IP du visiteur était transmis à Google dès lors qu’une police Google était chargée sur une page Web.

Il n’est donc pas illégal d’utiliser des Google Fonts mais uniquement depuis des serveurs respectueux de la vie privée. Cela revient donc à héberger les polices Google sur vos propres serveurs… comme nous le faisons généralement pour des polices Web dans nos projets de conception de thèmes sur-mesure.

En résumé, il vaut mieux privilégier une approche de conception dite privacy by design pour être tranquille. Je vous invite à lire ou relire notre guide complet sur WordPress et le RGPD.

Comment savoir si mon site embarque des polices Google ?

Il existe plusieurs méthodes pour vérifier si votre site WordPress embarque des polices Google.

Rappelons tout d’abord que c’est votre thème WordPress qui va gérer l’affichage des polices pour l’ensemble de vos pages. Pour connaître le thème en place sur installation WordPress, rendez-vous dans Apparence puis Thèmes.

Pour commencer, vous pouvez consulter la documentation de votre thème ou voir directement avec le support. Dans le cas où le développement du thème a été confié à une agence Web, contactez directement celle-ci pour en savoir plus.

Si la technique ne vous effraie pas, vous pouvez tout simplement inspecter le code source d’une page Web de votre site et recherchez les domaines suivants : fonts.googleapis.com ou fonts.gstatic.com.

Voici un exemple avec le thème OceanWP et la police ABeeZee :

<link rel='stylesheet' id='oceanwp-google-font-abeezee-css' href='//fonts.googleapis.com/css?family=ABeeZee:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&subset=latin&display=swap&ver=6.1.1' media='all' />

Une autre approche consiste à utiliser les outils de développement présents dans tout les navigateurs. Ils sont accessibles via le menu contextuel avec Inspecter – la dénomination peut changer en fonction du navigateur.

Dans l’onglet Réseau, vous pouvez voir l’ensemble des requêtes émises lors du chargement. Vous pouvez filtrer sur Police puis rechargez la page pour afficher les polices chargées.

Je reprends à nouveau mon exemple avec le thème OceanWP dans cette capture d’écran :

C’est donc cette fameuse requête en provenance des serveurs de Google que nous souhaitons éviter pour les raisons évoquées plus haut.

N’oublions pas que vos extensions peuvent également embarquer des polices Google sans que vous n’en ayez réellement conscience. C’est le cas par exemple de l’extension Slider Revolution souvent présente dans les thèmes premium.

Comment héberger sur mon serveur les Google Fonts ?

Rappelons tout d’abord qu’il est parfaitement légal d’héberger les polices proposées par Google dans la mesure où elles sont open source comme WordPress. Cela n’est pas toujours le cas avec des polices commerciales, faites attention !

Toutes les approches présentées ici ne se valent pas : il vous faudra potentiellement en tester plusieurs avant que cela fonctionne sur votre installation WordPress. L’effectivité du résultat dépendra directement de votre thème et des extensions qui chargent des polices Google plus ou moins proprement.

Je vous propose deux méthodes pour charger localement depuis votre serveur les polices de Google.

Avec l’extension Local Google Fonts (méthode facile)

Cette approche est à privilégier pour les utilisateurs disposant d’un thème premium et qui n’auraient pas les connaissances techniques ou un développeur disponible pour le faire manuellement.

Commencez par télécharger l’extension depuis votre administration WordPress ou à partir du lien ci-dessous pour une installation manuelle :

Rendez-vous ensuite dans Réglages puis Google Fonts.

L’extension détecte automatiquement les polices qui peuvent être chargées localement, c’est-à-dire sur votre serveur. Je reprends à nouveau mon exemple précédent avec la police ABeeZee qui a été identifiée. Une colonne d’état m’informe qu’elle chargée depuis l’URL fonts.googleapis.com, un serveur géré par Google.

Un simple clic sur le bouton Héberger localement vous permet de

• Télécharger la police avec ses variantes sous /wp-content/uploads/fonts/ de votre instance WordPress ;
• Convertir les fichiers dans le format WOFF2 qui est le plus performant à ce jour ;

Pour vérifier le résultat, retournez sur votre page d’accueil puis inspecter de nouveau le code source ou les ressources chargées via les outils de développement. Notez le changement d’URL pour la police ABeeZee :

Un inconvénient perdure toutefois : la police peut recevoir des mises à jour qu’il pourra être intéressant de récupérer – là où les utilisateurs des CDN de Google la recevront automatiquement. Il suffira de cliquer sur Recharger les polices pour actualiser les fichiers. Selon moi, cette fonctionnalité n’est utile qu’en cas de bugs réellement constatés sur votre site.

Une autre option intéressante proposée par Local Google Fonts est la possibilité de charger les polices en automatique. Autrement dit, l’extension s’occupera de rapatrier les polices à chaque fois qu’elle en découvrira sur vos pages Web. Dans la mesure où il est n’est pas commode de changer régulièrement de polices, je préconise de laisser désactiver cette option.

Une précision à destination des développeurs qui me lisent : c’est la fonction wp_enqueue_style qui est vérifiée pour détecter les polices Google embarquées sur votre site par l’extension. Cela ne fonctionnera pas avec des méthodes alternatives.

Avec l’extension OMGF (méthode facile alternative)

Il existe une alternative gratuite et premium à Local Google Fonts, il s’agit de l’extension OMGF. Elle se veut plus complète et capable de traiter certains cas plus complexes.

À mon sens, démarrez dans un premier temps avec la première extension mentionnée dans cet article et passez sur celle-ci dans le cas où elle ne conviendrait pas. Il est préférable de limiter le nombre de fonctionnalités pour garantir la stabilité dans le temps et notamment sur un usage aussi limité que le chargement de police.

Par le code (méthode complexe)

Cette approche est réservée aux développeurs qui seront capables de suivre les bonnes pratiques de chargement des polices Web.

Télécharger les polices Google manuellement

Rendez-vous sur le site de Google Fonts, effectuez une recherche puis cliquez sur Download family.

Décompressez l’archive ZIP puis vérifiez la présence des différentes variantes comme Regular, Italic ou Bold. Plus vous utilisez de variantes, plus vous impactez les performances. Il est donc pertinent de consulter votre web-designer pour spécifier les besoins avec précision. Il est rarement utile de charger toutes les graisses par exemple.

Convertir les polices au format WOFF2

Il existe plusieurs formats de fichiers pour les polices dont les plus couramment utilisés sont :

• TrueType (TTF) ;
• OpenType (OTF) ;
• SVG (Scalable Vector Graphics) ;
• WOFF (Web Open Font Format) ;
• WOFF2 (Web Open Font Format 2) ;

Il y a encore quelques années, nous étions obligés de charger les différents formats pour assurer une compatibilité maximale entre les navigateurs de vos visiteurs.

Désormais, nous privilégions le format WOFF2 qui est compatible à plus de 96% selon Can I use.

Si vous récupérez une police au format TTF – c’est mon cas avec ABeeZee, il vous faut donc la convertir pour vous simplifier l’intégration par la suite. Il existe de nombreux sites Web gratuits pour opérer cette conversion comme CloudConvert.

Il vous suffit d’envoyer les fichiers décompressés puis de lancer la conversion. Vous pourrez alors récupérer les fichiers convertis sur votre machine.

Envoyer vos polices sur votre serveur

Pour ce faire, il vous faudra un client FTP pour envoyer les fichiers convertis dans le dossier de votre thème sous /wp-content/themes/mon-theme/ ou équivalent. Pour ma part, j’ai pour habitude de créer un dossier à l’intérieur du thème sous la forme /assets/fonts/ pour m’y retrouver.

Déclarer les polices Web dans votre feuille de styles

Vous devez déclarer chaque variante en tant que @font-face comme ceci :

@font-face {
  font-family: 'abeezee';
  src: url('URL-police-regular') format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'abeezee';
  src: url('URL-police-bold') format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: 'abeezee';
  src: url('URL-police-italic') format("woff2");
  font-display: swap;
  font-style: italic;
  font-weight: 400;
}

Pour chaque variante, il vous faudra spécifier le chemin relatif du fichier que nous avons déposé à l’étape précédente. Vous êtes libre de renseigner des formats complémentaires comme le WOFF maximiser la compatibilité entre les navigateurs.

Indiquez ensuite les caractéristiques propres à chaque variante comme la graisse et le style. Par exemple, la variante italique doit être déclarée avec font-style: italic et un niveau de graisse normal. Certaines polices pourront embarquer des dizaines de variantes qu’il vous faudra déclarer en conséquence.

J’ai pris soin de nommer chaque variante avec le même nom de police via la propriété font-family. Cela me permet d’appliquer les styles bien plus facilement sur mes pages Web.

Utiliser les polices dans mon code CSS

A présent que les polices sont correctement déclarées, je peux les utiliser pour définir les styles typographiques. Vous pouvez par exemple déclarer une propriété font-family: 'abeezee' sur un paragraphe. Si le paragraphe contient du gras ou de l’italique, ils seront pris en charge grâce aux précédentes déclarations de variantes.

Je vous conseille par ailleurs de créer une classe par police comme ceci :

.font-family-body {
  font-family: 'abeezee';
}

De cette manière, il vous suffira d’utiliser cette classe directement dans votre code HTML / PHP. Si un jour, vous devez changer la police de corps de texte – comme dans mon exemple, vous n’aurez qu’une ligne de code à modifier.

Testez et vérifiez sur vos sites

À votre tour d’essayer d’hébergement localement les polices de Google et de tester les gains éventuels de performances ainsi obtenus.

Vous disposez à présent de toute l’information nécessaire pour le faire et vous y gagnerez aussi sur le plan de la vie privée. Rien que pour cela, vous devriez tenter l’expérience.

Je terminerai en vous proposant un choix alternatif : utilisez des polices open source et respectueuses de la vie privée comme les polices systèmes.