Comment ajouter des polices Google à WordPress ? 4 méthodes faciles !

Vous souhaitez personnaliser la typographie de votre site Web ? Vous êtes arrivé au bon endroit. Dans ce guide, nous vous montrerons différentes méthodes pour ajouter des polices Google à votre site WordPress, étape par étape .

Par défaut, les thèmes WordPress sont livrés avec des polices spécifiques et lorsque vous publiez du contenu, ces polices sont rendues dans le frontend. Cependant, vous souhaiterez parfois utiliser une police personnalisée sur votre site pour lui donner l'apparence parfaite pour votre marque. C'est pourquoi aujourd'hui, nous allons vous montrer comment inclure Google Fonts sur votre site !

Pourquoi ajouter Google Fonts à WordPress ?

La police que vous utilisez a un grand impact sur votre site. D'une part, cela affecte la conception de votre site Web et son apparence. La police est l'une des premières choses que les visiteurs voient lorsqu'ils visitent votre site, elle doit donc correspondre au style de votre entreprise. D'autre part, cela peut également avoir un impact sur l'expérience utilisateur. Par exemple, si la police est difficile à lire, vos visiteurs auront du mal à trouver ce qu'ils veulent et quitteront votre site. Ainsi, avoir la bonne police améliorera non seulement l'apparence de votre site, mais améliorera également l'expérience des utilisateurs .

C'est pourquoi nous vous recommandons fortement d'utiliser une police conviviale qui transmet l'essence de votre entreprise. Il existe plusieurs services de polices tels que Typekit d'Adobe et Friconix. Cependant, le meilleur est Google Fonts, un service gratuit avec des milliers de familles de polices prêtes à être intégrées à votre site Web.

Et la meilleure partie est que l'ajout de Google Fonts à WordPress est assez simple et ne prend que 5 minutes. Il y a plusieurs façons de le faire.

Méthodes pour ajouter Google Fonts à votre site WordPress

Il existe différentes méthodes pour inclure Google Fonts dans WordPress :

1. Utiliser des plugins
2. Modification du fichier functions.php
3. Via Style.css
4. Modification du fichier header.php

Toutes ces options permettent de faire le travail, alors choisissez celle qui correspond le mieux à vos compétences et à vos besoins. Avant d'examiner de plus près chacune de ces méthodes, vous devez vérifier si votre thème est livré avec l'intégration de Google Fonts.

Vérifier l'intégration des polices Google

La plupart des thèmes WordPress sont livrés avec un panneau de thème dédié. À partir de là, les utilisateurs peuvent personnaliser l'intégralité du thème sans écrire de code. Certains thèmes comme GeneratePress sont livrés avec la prise en charge intégrée des polices Google. Cela signifie que vous n'avez pas besoin d'utiliser des plugins ou des codes personnalisés pour intégrer les polices. Cela peut vous faire gagner du temps et vous faciliter la tâche.

Si vous utilisez un thème fourni avec l'intégration avec Google Fonts, vous pouvez apporter des modifications à la typographie de votre site à partir du panneau de thème ou du personnalisateur WordPress. Ainsi, avant de vous lancer dans le processus d'inclusion de Google Fonts sur votre site, nous vous recommandons de vérifier si votre thème est déjà fourni avec Google Fonts .

Voyons maintenant chaque méthode pour ajouter des polices Google à votre site WordPress.

1) Utiliser des plugins

L'un des moyens les plus simples d'ajouter des polices Google à WordPress consiste à utiliser un plugin. L'un des meilleurs est Google Fonts Typography. Il s'agit d'un outil gratuit qui vous aidera à inclure Google Fonts sur votre site sans écrire une seule ligne de code.

Tout d'abord, installez et activez le plugin sur votre site Web.

Après cela, allez dans Plugins et vérifiez les paramètres du plugin.

Lorsque vous cliquez dessus, vous serez redirigé vers le personnalisateur WordPress.

À partir de là, vous pouvez prendre le contrôle de la typographie de votre site Web. Vous verrez quatre configurations principales :

• Paramètres de base
• Réglages avancés
• Chargement de la police
• Débogage

Voyons ce que les paramètres de base et avancés ont à offrir.

Paramètres de base

Dans la section typographie de base, vous pouvez choisir votre famille de polices par défaut pour le corps, l'en-tête et les champs de saisie.

Dans la liste déroulante sous chaque section Famille de polices , vous pourrez choisir l'une des centaines de polices Google. Si vous connaissez la police que vous voulez, saisissez-la simplement à l'aide de la fonction de recherche.

Pour ce tutoriel, nous utiliserons la police Work Sans. Après avoir choisi une police dans la liste déroulante, les modifications seront reflétées instantanément et vous verrez l'aperçu en direct avec la nouvelle police. En plus de cela, vous pourrez spécifier un poids et un style de police personnalisés.

Une fois que vous avez terminé, publiez les modifications.

Réglages avancés

Dans les paramètres avancés , vous pouvez choisir la famille de polices pour votre image de marque, votre navigation, votre contenu, votre barre latérale et votre pied de page.

C'est une fonctionnalité intéressante si vous prévoyez d'utiliser différentes polices sur différentes parties de votre site Web. Après avoir sélectionné une police dans la liste déroulante, publiez les modifications.

La version gratuite de Google Fonts est livrée avec des fonctionnalités limitées, mais il existe également une version premium disponible à partir de 29 USD pour un site.

Cette version pro vous aidera à configurer des éléments tels que la taille de la police, la couleur , l'optimisation et les éléments personnalisés. C'est un excellent choix si vous souhaitez prendre le contrôle de toutes vos options de typographie. D'un autre côté, si vous ne voulez pas dépenser d'argent pour cela, vous pouvez apporter ces modifications en utilisant un peu de CSS.

2) Editez le fichier functions.php

Une autre option pour ajouter Google Fonts à votre site WordPress consiste à modifier le fichier functions.php . Avant d'aller de l'avant avec cette méthode, assurez-vous que vous utilisez un thème enfant. Si vous ne savez pas comment procéder, vous pouvez lire comment créer un thème enfant ou utiliser un plugin de thème enfant.

Pour cette méthode, vous pouvez soit éditer directement le fichier functions.php soit utiliser un plugin. Si vous êtes débutant, nous vous recommandons d'utiliser le plugin Code Snippets pour ajouter du code personnalisé à votre site. Dans ce guide, nous utiliserons des extraits de code.

REMARQUE : Il convient de noter que si vous utilisez des extraits de code, vous n'avez pas besoin de créer un thème enfant. Cependant, nous recommandons toujours d'en avoir un.

Donc, pour éditer le functions.php en utilisant des extraits de code, installez et activez d'abord le plugin.

Ensuite, allez dans les paramètres des plugins. À partir de là, vous pouvez ajouter un nouvel extrait à votre site.

Sélectionnez une police

Dans un nouvel onglet, ouvrez Google Fonts et sélectionnez une famille de polices à utiliser sur votre site Web. Vous pouvez utiliser la fonction de recherche de polices sur le site ou simplement parcourir. Dans notre cas, nous utiliserons la famille Lato.

Une fois que vous avez sélectionné une police, vous accédez à la page de la police. Vous verrez l'option d'aperçu où vous pourrez tester la police avant de l'ajouter à votre site. Après cela, sélectionnez les styles que vous souhaitez utiliser. Par exemple, nous allons choisir les styles Regular et Bold .

Vous pouvez revoir vos sélections dans le panneau de droite.

Après avoir ajouté les styles, vous êtes prêt à les intégrer dans WordPress. Pour ce faire, copiez le lien de la famille de polices à partir de l'onglet Incorporer .

Ajouter la police à votre site

Maintenant, copiez l'extrait de code suivant et collez-le dans le plugin Code Snippets.

 <?php
fonction wpb_add_google_fonts() {
   wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css2?family=Lato:[email protected];700&display=swap', false );
   }
   
   add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );
?>

Assurez-vous d'avoir remplacé l'URL de la police par les polices que vous avez sélectionnées.

Après cela, enregistrez l'extrait et activez-le. Vous avez ajouté avec succès Google Fonts à votre site WordPress !

Si vous ne souhaitez pas utiliser de plugin pour cette tâche, collez simplement le code ci-dessus dans le fichier functions.php de votre thème enfant à l'aide d'un client FTP.

Appliquer la nouvelle police

Après cela, vous pouvez appliquer la nouvelle police avec un peu de CSS. Par exemple, pour modifier la police du corps, vous pouvez ajouter le code suivant à la section CSS supplémentaire du personnalisateur.

 corps {
famille de polices : 'Lato', sans empattement ;
} 

Après avoir publié la modification, vous verrez comment la police du corps change. Puisque vous utilisez le personnalisateur, vous verrez immédiatement les modifications dans la section d'aperçu.

Si vous avez besoin de modifier d'autres éléments sur votre site, vous devez modifier le code ci-dessus et spécifier les éléments que vous souhaitez modifier et la famille de polices. Par exemple, si vous souhaitez remplacer tous les en-têtes h3 par la nouvelle police, écrivez quelque chose comme ceci :

 h3 { 
famille de polices : 'Lato', sans empattement ; 
}

De cette façon, vous pourrez ajouter un nombre illimité de familles de polices Google et personnaliser votre site WordPress.

3) Personnalisez le style.css (@import)

Une autre façon d' ajouter des polices Google à WordPress consiste à utiliser le fichier style.css . Cette fois, au lieu d'utiliser des codes PHP, vous modifierez le style.css du site Web pour ajouter de nouvelles familles de polices.

Sélectionnez la police

Tout d'abord, accédez à Google Fonts et sélectionnez celles que vous souhaitez utiliser sur votre site. Sous la section Embed , sélectionnez le mode @import .

Ajouter la police à votre site

Maintenant, le panneau vous montrera un code CSS unique. Copiez simplement le code et collez-le dans le CSS supplémentaire de votre tableau de bord WordPress.

Appuyez ensuite sur le bouton Publier .

Appliquer la nouvelle police

Après cela, vous pouvez décider où vous souhaitez appliquer la nouvelle police. Par exemple, nous avons choisi la police Kufam en cursive, donc pour modifier la police du corps, utilisez le code CSS suivant :

 corps {
famille de polices : 'Kufam', cursive ;
}

Comme vous pouvez le constater, la section d'aperçu en direct se met automatiquement à jour et affiche les modifications.

De même, si vous souhaitez appliquer la nouvelle police à tous les titres h2, le code à utiliser est :

 h2 { 
famille de polices : 'Kufam', cursive ; 
}

C'est une autre méthode très simple que même les débutants peuvent utiliser. Et la bonne chose est que vous n'avez pas besoin de plugins.

4) Editez le fichier header.php

La quatrième méthode pour ajouter Google Fonts à votre site WordPress consiste à modifier le fichier header.php . Nous avons déjà vu comment modifier l'en-tête dans WordPress, donc si vous avez lu ce message, ce sera facile. Ne vous inquiétez pas si vous ne l'avez pas fait. Dans cette section, nous allons vous montrer comment inclure de nouvelles polices. Même si cela implique un peu de codage, c'est assez simple, même pour les débutants.

Pour cela, vous aurez besoin de :

• Le lien de Google Font
• Le chemin d'accès à votre fichier style.css

Voyons comment obtenir chacun d'eux.

Obtenir le lien de la police Google

Le lien de la police peut être récupéré sur le site Web de Google Fonts. Recherchez la police que vous prévoyez d'utiliser et sélectionnez-la.

Dans la barre d'adresse, vous verrez l'URL de la police.

Obtenir le chemin style.css

Voyons maintenant comment trouver le chemin style.css . Si vous avez accès à cPanel, connectez-vous au panneau de configuration de votre site et ouvrez le gestionnaire de fichiers. Dans le dossier wp-content , vous verrez un dossier appelé themes . C'est là que vivent tous vos thèmes installés. Avant d'aller de l'avant, vous devez savoir quel est le thème actif de votre site Web.

Vous pouvez trouver votre thème actif dans la section Apparence du tableau de bord WordPress.

Par exemple, dans notre cas, c'est Vingt-Vingt.

Dans le cPanel, nous irons à wp-content > thèmes > vingt vingt.

Dans le panneau de gauche, vous verrez le chemin vers vos fichiers de thème. Copiez-le.

En suivant notre exemple, nous avons quelque chose comme ça : public_html/wp-content/themes/twentytwenty . Maintenant, tout ce que vous avez à faire est de supprimer la partie public_html , d'y ajouter le nom de domaine, et de mentionner le fichier /style.css à la fin du code. Ainsi, le nouveau code ressemblera à ceci www.example.com/wp-content/themes/twentytwenty/style.css .

Lorsque vous ouvrez l'URL sur votre navigateur, le fichier style.css se charge. Si vous obtenez une page d'erreur 404, cela signifie que le chemin d'accès à votre fichier style.css est erroné.

Ajoutez le lien et le style.css de Google Font à l'en-tête

Une fois que vous avez le lien de la police et le chemin style.css, tout ce que vous avez à faire pour ajouter Google Fonts à votre site WordPress est de copier le code ci-dessous et de le coller dans le fichier header.php des thèmes .

 <link href="https://fonts.googleapis.com/css2? family= Oxygène & display=swap" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "http://votresite.com/wp-content/themes/votretheme/style.css" media = "all" >

N'oubliez pas de remplacer l'URL par votre police et de changer le chemin vers votre style.css par le vôtre.

Si vous ne vous sentez pas à l'aise pour modifier le fichier header.php , vous pouvez utiliser le plugin Insert Headers and Footers pour ajouter le code. Voyons comment utiliser cet outil.

Modifier header.php avec un plugin

Tout d'abord, installez et activez Insérer des en-têtes et des pieds de page sur votre site.

Après cela, allez dans Paramètres > Insérer des en-têtes et des pieds de page .

Vous y verrez trois blocs.

• Entête
• Corps
• Bas de page

Comme vous allez ajouter le code à la section d'en-tête, collez le code ci-dessus avec l'URL de votre police et le chemin style.css dans les scripts dans la section d'en-tête . Ensuite, n'oubliez pas de sauvegarder les modifications.

Vous pouvez laisser les sections corps et pied de page vides car vous n'y apporterez aucune modification.

Le code que vous venez de coller ira juste au-dessus de la balise </head> . Si vous n'utilisez pas le plugin, assurez-vous de coller le code HTML dans la section <head> . Sinon, ça ne marchera pas !

Ça y est, vous avez terminé l'intégration et ajouté Google Fonts à votre site !

Astuces Google Fonts Pro

L'ajout de Google Fonts à votre site n'est que la première étape. Après cela, nous vous recommandons de consulter certains de nos conseils de pro qui vous aideront à optimiser encore plus votre site.

Héberger des polices Google localement

Google Fonts est une bibliothèque en ligne qui contient de nombreuses polices gratuites. Lorsque vous utilisez leur service pour intégrer des polices sur votre site, vous enverrez des demandes à leurs serveurs et récupérerez le contenu demandé. Si le serveur Google Fonts rencontre des problèmes techniques, cela peut également affecter les performances de votre site Web.

Pour vous débarrasser de ce problème, vous pouvez envisager d'héberger les polices sur votre serveur local. Si vous faites cela, vous n'aurez pas besoin d'envoyer des demandes externes supplémentaires. Cependant, gardez à l'esprit que cela peut occuper les ressources de votre serveur.

Activer la prélecture DNS

La plupart des plugins de mise en cache WordPress sont livrés avec une fonctionnalité appelée prélecture DNS. L'idée est que lorsque vous envoyez des requêtes HTTP externes, votre site Web deviendra plus lent. Pour résoudre ce problème, vous pouvez utiliser la fonction de prélecture DNS qui vous permet de saisir des URL externes que vous pouvez récupérer pour réduire les requêtes externes.

Voici un exemple de la section de prélecture DNS du plugin WP Rocket.

Tout ce que nous avons à faire est de saisir le domaine Google Fonts dans la section URL à prérécupérer et d'enregistrer les modifications.

Limiter le poids des polices

Pour personnaliser les polices, vous pouvez utiliser les poids de police. De nombreuses options de poids de police sont disponibles, telles que :

• Mince
• Lumière supplémentaire
• Lumière
• Ordinaire
• Moyen
• Semi-gras
• Audacieux
• Extra-gras
• Noir

Normalement, les sites utilisent le poids de police Regular et Bold pour les titres. Ainsi, lorsque vous sélectionnez des styles, choisissez uniquement les styles que vous prévoyez d'utiliser. Sinon, l'ajout de poids supplémentaires au serveur que vous n'utiliserez pas entraînera une augmentation des requêtes HTTP.

Conclusion

Dans l'ensemble, si vous ajoutez Google Fonts à WordPress, vous pourrez personnaliser la typographie de votre site. Non seulement votre site Web sera plus beau, mais vous offrirez également à vos clients une meilleure expérience.

Nous avons vu différentes méthodes pour le faire :

1. Avec des plugins
2. Via le fichier functions.php
3. Via Style.css
4. Modification du fichier header.php

Alors, quelle méthode devriez-vous utiliser? Ils feront tous le travail, cela dépend donc de vos compétences et de vos préférences. Si vous n'êtes pas à l'aise avec le codage, nous vous recommandons d'utiliser la méthode du plugin. Google Fonts Typography est très facile à utiliser et sera un excellent ajout à votre site Web. Cependant, si vous ne souhaitez pas ajouter plus de plugins à votre site, vous pouvez modifier le fichier functions.php de votre thème en utilisant le plugin Code Snippets ou via FTP. De plus, la méthode style.css @import est un autre moyen rapide et facile d'ajouter des polices Google avec quelques lignes de code CSS. Alternativement, vous pouvez également ajouter l'URL de votre police et le chemin style.css au fichier header.php .

Si vous avez aimé cet article, partagez-le avec vos amis sur les réseaux sociaux. Pour des articles plus intéressants pour améliorer votre site, consultez notre section blog.

Quelle méthode comptez-vous utiliser ? En connaissez-vous d'autres ? Faites-nous savoir dans la section commentaires ci-dessous!