Home » Genesis framework » Comment héberger les polices Google localement dans le thème Genesis Sample (ou tout autre thème WordPress)

Comment héberger les polices Google localement dans le thème Genesis Sample (ou tout autre thème WordPress)

Vous cherchez comment ajouter des polices Google Fonts aux thèmes WordPress Full Site Editing ? Cliquez ici.

Vous avez peut-être entendu dire que le chargement des Google Fonts depuis les serveurs de Google constitue une violation du GDPR. Vous savez aussi probablement que le chargement d’éléments à partir d’autres serveurs peut ralentir votre site Web. C’est pourquoi aujourd’hui, nous allons apprendre à héberger Google Fonts localement dans WordPress.

Il existe plusieurs façons d’héberger Google Fonts localement dans WordPress – vous pouvez le faire en utilisant un plugin, ou vous hébergez les polices Google dans le thème Genesis Sample sans plugins tiers – en téléchargeant vous-même les polices Google Fonts, et en les incluant dans votre thème WordPress. Je vais vous montrer comment procéder dans les deux cas.

Comment savoir si les polices Google de vos sites Web sont hébergées localement ?

Si vous n’êtes pas sûr que votre site Web charge les polices Google localement ou à distance, vous pouvez utiliser l’outil gratuit Google Font Checker. Vous n’aurez pas besoin d’installer de plugin ou d’exécuter une procédure compliquée. Il vous suffit d’entrer l’URL de votre site Web dans le champ prévu à cet effet et de lancer le test pour vérifier si votre site Web WordPress fait appel à Google pour obtenir des polices.

Comment héberger Google Fonts localement à l’aide d’un plugin (fonctionne avec n’importe quel thème WordPress)

Si vous souhaitez charger Google Fonts localement en utilisant n’importe quel thème WordPress, vous pouvez utiliser un plugin gratuit OMGF.

Allez dans Plugins >> Add New, et entrez OMGF dans le champ de recherche des plugins en haut. Installez le plugin OMGF | Host Google Fonts Locally, et activez-le.

wordpress plugin host google fonts locally

Dans la plupart des cas, vous n’aurez pas besoin de faire autre chose – une fois que vous ouvrirez votre site WordPress en tant que visiteur pour la première fois après l’installation du plugin OMGF, le plugin commencera à mettre en cache les polices Google localement, sans qu’il soit nécessaire de modifier les paramètres ou d’effectuer d’autres changements.

Si quelque chose ne fonctionne pas comme il le devrait, vous pouvez toujours vérifier la page Réglages >> Optimiser les polices Google pour les paramètres du plugin, mais dans la plupart des cas, vous n’avez pas besoin d’y apporter des modifications.

wordpress local google fonts plugin

Comment héberger les polices Google localement dans le thème Genesis Sample sans aucun plugin

Si vous utilisez le framework Genesis, vous aimez probablement avoir votre panneau d’administration WordPress aussi propre et minimal que possible. Comme moi, en fait.

Héberger les Google Fonts localement dans le thème Genesis Sample est un peu plus difficile sans plugin tiers, mais ce n’est pas difficile à faire.

Tout d’abord – allez dans Apparence >> Editeur de fichier de thème, et vérifiez quels types de Google Fonts seront nécessaires.

Par défaut, le thème Genesis Sample utilise la famille de polices Source Sans Pro (styles 400, 400 italique, 600, 700). Mais si vous utilisez une autre police Google, la méthode fonctionnera parfaitement pour vous aussi.

Vous devrez supprimer la ligne commençant par ‘fonts-url’ pour que Genesis ne charge pas la police Google depuis le serveur de Google.

genesis sample theme google fonts

Connectez-vous au serveur FTP de votre site WordPress en utilisant Filezilla ou tout autre client FTP, et créez un nouveau répertoire nommé fonts dans votre installation WordPress (idéalement, ce devrait être le répertoire /wp-content/fonts/ ).

Allez maintenant dans l’outil d’aide Google Webfonts et recherchez la police Google dont vous avez besoin :

  1. sélectionnez la famille de polices sur la gauche
  2. sélectionnez les jeux de caractères, les styles de police.
  3. Dans la fenêtre Copy CSS, il y a un champ Customize folder prefix. Saisissez le chemin d’accès complet au dossier de polices que vous venez de créer (par exemple http://mysite.com/wp-content/fonts/).
  4. Cliquez sur le bouton Télécharger les fichiers pour télécharger les polices Google sélectionnées sur votre ordinateur.
  5. Extrayez le téléchargement et téléchargez les fichiers de polices Google dans le répertoire wp-content/fonts/ que vous avez créé auparavant.
  6. Copiez le CSS de l’outil d ‘aide Google Webfonts – il sera prêt à être utilisé dans votre site Web.
how to host google fonts locally in wordpress and genesis framework

Best WordPress hosting 2024

Maintenant, il y a une dernière étape à faire. Allez dans Apparence >> Éditeur de fichiers de thème, et ouvrez le fichier style.css de votre thème Genesis Sample. Puis collez le code CSS copié précédemment dans le fichier style.css du thème. Collez-le quelque part en haut, avant le corps et les autres styles.

Pour vous assurer que les modifications sont chargées dans votre navigateur, changez le numéro de version en haut du fichier style.css par un numéro plus grand (par exemple de 3.4.1 à 3.4.2) et cliquez sur Enregistrer les modifications.

host google fonts locally in genesis

Une fois que c’est fait, votre thème Genesis Sample utilisera les polices Google hébergées localement sur votre serveur.

Tags:

Fathom analytics - privacy focused cookie-free website analytics

Most popular tutorials


Get our latest WordPress news and special offers from RockSolidWP!

Only useful WordPress and WooCommerce tips and tricks and exclusive offers for our readers once a month. No marketing nonsense.

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK