Utiliser Google Fonts sur WordPress est très simple. Ce répertoire gratuit propose plus de 800 polices web utilisables sur votre site. Google Fonts est un service gratuit très apprécié, utilisé par des millions de sites WordPress pour améliorer leur apparence et leur ergonomie. Voici comment utiliser Google Fonts sur WordPress sans impacter les performances de votre site et en améliorant votre score PageSpeed
Méthode 1 : Héberger Google Fonts sur votre serveur WordPress
Étape 1 : Choisir une police Google
Utiliser moins de polices Google permettra de réduire les requêtes (moins de polices = moins de requêtes).
Choisissez soigneusement les graisses de police : le nombre de graisses utilisées influe sur la vitesse de chargement de votre page. Pour que Google Fonts ne charge que les graisses nécessaires, décochez les autres.
Étape 2 : Télécharger la police
Le téléchargement de la police est la deuxième étape. Il est important de noter que Google téléchargera automatiquement toutes les graisses de police ; il n’est donc pas nécessaire de les sélectionner à ce stade. Le choix des graisses sera requis à la troisième étape.
Étape 3 : Convertir les polices en polices Web
Cliquez sur le bouton « Ajouter des polices » sur leur site, sélectionnez uniquement les polices que vous utiliserez sur votre site web et téléchargez-les. Il s'agit d'un fichier roboto-regular.ttf et d'un fichier roboto-bold.ttf ; les deux graisses sont donc incluses. Les formats WOFF et WOFF2 étant compatibles avec tous les principaux navigateurs, vous pouvez laisser les paramètres par défaut. Cliquez ensuite sur le bouton « Convertir » pour lancer la conversion.
Étape 4 : Télécharger les fichiers de polices convertis
Une fois les polices converties, vous pourrez les télécharger. Comme deux polices ont été téléchargées sur votre ordinateur, le fichier zip contiendra quatre fichiers de police au total.
Étape 5 : Téléverser les fichiers de police dans les fichiers WordPress
Veuillez vous assurer que les fichiers de polices web sont téléchargés via FTP ou cPanel , idéalement dans le dossier wp-content/uploads, afin d'éviter qu'ils ne soient écrasés par les mises à jour du thème et du noyau. Nous avons téléchargé les polices dans un dossier « fonts » (afin qu'elles soient séparées des autres fichiers). Vous devriez pouvoir télécharger les polices après avoir ouvert les liens dans votre navigateur, ce qui vous permettra de vérifier qu'elles ont bien été téléchargées.
Étape 6 : Ajouter une police personnalisée au CSS
Après avoir téléchargé le fichier zip, nous ajouterons la feuille de style CSS stylesheet.css. Le code CSS ci-dessous associe vos polices à votre CSS existant et les rend disponibles.
Vous pouvez placer le code CSS dans le fichier functions.php ou au début de votre fichier style.css. Vous pouvez utiliser un fichier CSS externe ou la fonction wp_enqueue_style de WordPress. Dans le fichier style.css par défaut du thème, nous allons le coller. Remplacez les URL relatives par des URL absolues en copiant-collant le code dans la feuille de style.
URL par défaut du thème dans stylesheet.css :
src: url('Roboto-Bold.woff2') format('woff2'),
url('Roboto-Bold.woff') format('woff');
Remplacer par :
src: url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff2') format('woff2'),
url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff') format('woff');
Pour utiliser facilement la police dans le code HTML actuel, créez une classe personnalisée. Classes CSS roboto_font et roboto_bold_font .
.robot_font {
font-family: “Roboto”, “Arial”, sans-serif; }
.robot_bold_font {
police-family: “Roboto”, “Arial”, sans-serif;
police-weight: gras;
}
Étape 7 : Définir la police par défaut
Pour que cette police devienne la police par défaut de votre site web, vous devez inclure le code CSS dans votre fichier style.css.
Vous devrez peut-être déboguer ou modifier la police pour remplacer les propriétés de famille de polices existantes.
L'étape suivante consiste à importer le fichier stylesheet.css que vous avez obtenu dans un dossier portant le même nom et à y ajouter le CSS. Le code CSS ci-dessous permettra à vos polices de fonctionner avec votre CSS existant et sera prêt à l'emploi dès son insertion. Vous pouvez utiliser une feuille de style externe ou la fonction WordPress wp_enqueue_style pour charger des feuilles de style.
Méthode 2 : Préchargement des polices Web – Optimisation de la partie visible au chargement de la page
Si vous utilisez Google Fonts, vous devrez peut-être vous référer à la feuille de style préparée par Google et envoyée à votre site WordPress depuis ses serveurs. En inspectant votre site web avec les outils de développement de Google Chrome, vous pourrez observer le processus en coulisses. Il est possible que vous y trouviez deux entrées pour Google Fonts.
Veuillez consulter l'image ci-jointe.
En cliquant sur le fonts.googleapis , vous constaterez que la feuille de style correspondant à l'URL s'affiche sur la page ouverte. De plus, chaque déclaration font-face déclenche une requête vers le fichier de police spécifique.
Cela signifie que l'utilisateur doit se rendre sur fonts.gstatic.com pour obtenir la graisse de police appropriée si une graisse différente est utilisée. Cette étape peut allonger le temps de chargement de votre page WordPress.
Accédez donc au fichier functions.php de votre thème actuel et saisissez le code PHP suivant dans la fonction qui gère les polices.
fonction twentyeleven_resource_hints( $urls, $relation_type ) {
si ( wp_style_is( 'rumi-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
$urls[] = tableau(
'href' => 'https://fonts.gstatic.com',
'origine croisée',
);
}
renvoyer $urls;
}
ajouter_filtre( 'wp_resource_hints', 'twentyeleven_resource_hints', 10, 2 );
Méthode 3 : Optimiser les polices Google pour WordPress à l’aide d’un plugin
Comme pour la plupart des tâches liées à WordPress, les extensions simplifient grandement l'optimisation des polices Google. De plus, elles gèrent la partie logicielle, vous évitant ainsi de vous soucier de l'emplacement du code dans le système.
Si vous avez installé Google Fonts sur votre site WordPress et que vous effectuez un test de performance avec PageSpeed Insights ou GTmettrix, vous obtiendrez le message d'erreur suivant : fonts.googleapis.com.
Ce problème survient car Google Fonts n'est pas compatible avec la plateforme WordPress. Cela signifie que votre site WordPress doit être optimisé pour Google Fonts.
Un plugin gratuit permet de corriger cela : OMGF | Host Google Fonts Locally
Une fois l'installation terminée, l'extension remplacera automatiquement la méthode `wp en queue script()` de WordPress par la fonction `wp head()`. Cette extension gère tout de manière autonome.
Retrouvez d'autres articles de ce type sur Seahawk Media .
