Comment utiliser les polices Google avec WordPress ?

Le Web moderne est une question d'expérience utilisateur. Les entreprises investissent beaucoup de temps et d'argent pour s'assurer que les visiteurs de leur site Web obtiennent la meilleure expérience possible lors de la navigation sur leur site Web.

La représentation textuelle fait partie intégrante de l'esthétique du site. La qualité de votre contenu n'a pas d'importance ; s'il n'est pas agréable à lire et est trop encombré pour les lecteurs, alors tous vos efforts sont vains.

Bien qu'un certain nombre d'options typographiques s'offrent à vous, le moyen le plus simple d'accéder à des centaines de polices professionnelles (gratuitement) consiste à utiliser Google Fonts avec votre site Web WordPress.

Dans cet article, je vais vous présenter des instructions étape par étape pour apprendre à ajouter manuellement des polices WordPress Google à votre site Web et en utilisant le plugin Easy Google Fonts . Je vais également vous montrer les meilleures polices que vous pouvez utiliser pour améliorer la lisibilité du contenu de votre site Web.

1- Que sont les polices WordPress Google et pourquoi les utiliser ?

Avant de commencer, examinons rapidement ce que sont les polices Google ainsi que les principaux avantages de leur utilisation sur votre site Web WordPress.

Google Fonts est une bibliothèque de polices libres sous licence lancée en 2010. Vous pouvez utiliser l'incroyable bibliothèque de Google Fonts en appelant l'API fournie. Le fait intéressant est que vous pouvez utiliser gratuitement 877 polices optimisées pour le Web. C'est incroyable. Il propose un répertoire Web interactif qui vous permet de rechercher des types de polices spécifiques et de les tester dans votre navigateur Web.

L'utilisation de WordPress Google Fonts présente un certain nombre d'avantages. Ils sont gratuits (même pour des projets commerciaux), pré-hébergés (afin qu'ils ne prennent pas les ressources de votre serveur) et téléchargeables (vous pouvez les utiliser en version imprimée).

Il existe un grand nombre de sites Web qui utilisent actuellement les polices Google dans WordPress à leur avantage. Tous les thèmes modernes prennent en charge l'utilisation de Google Fonts.

Si vous êtes prêt à réorganiser la typographie de votre site avec des polices Web faciles à utiliser, il vous suffit de trouver les bonnes polices et de les utiliser avec votre site Web WordPress.

2- Comment ajouter manuellement des polices Google à WordPress

Google Fonts élimine la plupart des tâches lourdes liées à l'intégration de familles de polices dans votre site Web. Il s'agit d'une bibliothèque en ligne qui peut être appelée dans n'importe quel projet Web comme n'importe quel autre script JS ou CSS.

Dans cette section, je vais vous montrer comment installer manuellement les polices Google sur un site Web WordPress.

Étape 1 : Trouvez la police que vous souhaitez ajouter à votre site Web

Pour commencer, parcourez le répertoire Google Fonts et choisissez la police que vous souhaitez utiliser sur votre site WordPress. Si vous avez déjà une police de caractères spécifique, vous pouvez simplement la rechercher à l'aide du champ de recherche dans la barre latérale droite.

Vous pouvez également filtrer les polices par catégorie, langues, nombre de styles, épaisseur, inclinaison et largeur ou les trier par date d'ajout, par ordre alphabétique, tendance ou par popularité.

• Ce sont des polices qui ont de petites lignes attachées à la fin des traits de lettre, par exemple Times New Roman et Courier .
• Sans Serif. Les polices qui n'ont pas de petites lignes à la fin des traits de lettre sont des polices sans empattement, par exemple Helvetica et Roboto .
• Les polices d'affichage sont principalement utilisées pour les gros textes, par exemple les titres.
• Polices qui ont un aspect manuscrit, par exemple Pacifico .
• Polices qui ont exactement le même espacement pour tous les caractères, par exemple Source Code Pro .

L'un des meilleurs avantages de l'utilisation de la fonction de répertoire interactif de Google Fonts est que vous pouvez prévisualiser rapidement les polices qui vous intéressent. Tout ce que vous avez à faire est de cliquer dans la zone de champ de la police et d'y saisir du texte.

Pour les besoins de ce tutoriel, je vais utiliser Open Sans .

Étape 2 : ajoutez les polices à votre sélection

Maintenant que nous savons avec quelle police nous allons, ajoutons-la à notre sélection. Vous pouvez le faire en cliquant sur le signe plus (+) dans le coin supérieur droit de la zone de famille de polices.

Vous pouvez ajouter autant de familles de polices que vous le souhaitez à votre sélection. Une fois que vous êtes prêt, cliquez sur la barre noire X Family Selected en bas de l'écran pour afficher votre sélection.

Étape 3 : Personnaliser la police

La barre X Family Selected ouvre une fenêtre qui comporte deux onglets – Intégrer et Personnaliser . Avant d'intégrer la famille de polices dans notre site Web WordPress, nous allons prendre un moment pour la personnaliser un peu.

Dans l'écran Personnaliser , cochez les cases des styles et des langues que vous souhaitez pouvoir utiliser sur votre site Web.

Gardez à l'esprit que plus vous sélectionnez de styles de police et de langues, plus le temps de chargement des pages de votre site sera long. Vous remarquerez un indicateur de temps de chargement dans le même écran qui vous permet de savoir si votre sélection ralentira les temps de chargement.

Pour éviter que notre sélection de polices n'affecte les temps de chargement des pages de notre site, nous avons décidé d'opter pour une sélection simple – light 300 et regular 400 .

Étape 4: Intégrez les polices Google dans votre site Web WordPress

Il existe plusieurs façons d'ajouter une police personnalisée à WordPress. Nous allons vous montrer comment le faire en utilisant la fonction wp_enqueue_style() car c'est l'approche recommandée pour les sites Web WordPress.

Commencez par retourner à l'onglet Intégrer et copiez le lien (URL) de votre sélection de polices dans votre presse-papiers. Dans notre cas, l'URL complète est : https://fonts.googleapis.com/css?family=Open+Sans:300,400 .

Ensuite, connectez-vous à votre tableau de bord WordPress et dans Apparence, accédez à Éditeur et ouvrez le fichier functions.php de votre thème actif à l'aide d'un client FTP et ajoutez-y le code suivant.

 fonction add_google_fonts() {

wp_enqueue_style( ' add_google_fonts ', ' https://fonts.googleapis.com/css?family=Open+Sans:300,400', false );}

add_action( 'wp_enqueue_scripts', 'add_google_fonts' );

Remarque : Vous devrez remplacer l'URL par la vôtre.

Vous pouvez commencer à utiliser la police que vous venez d'ajouter en utilisant les options de typographie de votre thème (si elle les prend en charge) ou en ajoutant du code à la feuille de style principale de votre thème actif. Par exemple, si nous voulions remplacer tous les en-têtes H2 par notre nouvelle police, notre code pourrait ressembler à ceci :

 h2 {

font-family : 'Open Sans', sans-serif ;

}

J'ai réussi à mettre à jour mon WordPress avec Google Fonts. Il est possible que Google Fonts ne fonctionne pas pour des raisons étranges et que je doive me référer au jeu de polices par défaut qui peut être affiché en tant que sauvegarde. Mais cela arrive assez rarement.

Pourquoi la vitesse est cruciale pour le référencement et l'expérience utilisateur ?

Ces conseils d'experts vous montreront comment améliorer la vitesse de vos sites Web WordPress.

J'accepte les conditions d'utilisation et la politique de confidentialité de Cloudways

Obtenez un livre électronique maintenant !

Merci

Votre ebook est en route vers votre boîte de réception.

Pour ce faire, ajoutez simplement vos types de polices hébergés localement par défaut, tels que Georgia, Cambria ou Courier.

3- Comment ajouter des polices Google à WordPress à l'aide d'un plugin

Pour certains, l'intégration manuelle de WordPress Google Fonts n'est peut-être pas l'option. Ne t'inquiète pas. Il existe un autre moyen (plus simple) d'ajouter des polices Google à votre site Web WordPress. Via un plugin.

Dans cette section, je vais vous montrer comment intégrer les polices Google dans WordPress à l'aide du plugin Easy Google Fonts .

Étape 1 : Installer et activer le plugin

Connectez-vous à votre panneau d'administration WordPress et accédez à Plugins > Ajouter un nouveau . Recherchez Easy Google Fonts et installez-le sur votre site Web.

Une fois le plugin installé, cliquez sur le bouton Activer pour commencer à l'utiliser.

Étape 2 : commencez à utiliser les polices Google

Une fois que vous avez activé le plugin sur votre site Web, il mettra automatiquement en file d'attente les feuilles de style pour les polices Google que vous choisissez d'utiliser. Pour commencer, rendez-vous sur Apparence > Personnaliser dans le panneau d'administration WordPress.

Vous remarquerez qu'un nouvel élément de menu a été ajouté au personnalisateur WordPress appelé Typographie .

Il vous permet de contrôler les paramètres de typographie de vos paragraphes et divers titres (H1 à H6).

Supposons que vous vouliez modifier la police Paragraphs sur votre site Web, le plugin Easy Google Fonts vous permet de personnaliser ses styles, son apparence et sa position. Jetons un coup d'œil aux différentes options de style qu'il propose.

Dans l'onglet Styles , vous pouvez configurer votre script, votre famille de polices, l'épaisseur de la police, la décoration du texte et la transformation du texte. L'option de famille de polices vous donne accès à des centaines de polices Google classées en polices Web standard , polices Google Serif, polices Google Sans Serif, polices d' affichage Google , polices d'écriture manuscrite Google et polices Google Monospace .

Donc, si nous voulions utiliser Open Sans , nous définirions l'option de script sur Latin , l'option de famille de polices sur Open Sans et le poids de la police sur Regular (qui est l'équivalent de Regular 400 ).

Vérifiez simplement comment la police a changé dans l'écran d'aperçu ? L'un des principaux avantages de l'utilisation du plugin Easy Google Fonts est que vous pouvez prévisualiser en direct à quoi ressemblent vos publications et vos pages lorsque vous sélectionnez une police à utiliser.

4- Meilleures polices à utiliser

Le ciel est la limite en matière de sélection de polices avec Google Fonts. En tant que webmaster, vous avez la liberté de choisir la police que vous jugez adaptée à vos lecteurs. Cependant, certaines polices sont populaires pour la lisibilité.

Examinons les meilleures polices Google qui sont largement utilisées et offrent la meilleure lisibilité.

1. Lora

Lora est l'une des familles de polices les plus utilisées en raison de sa lisibilité et de ses variantes.

2. Affichage de la foire

Cette famille de polices offre une meilleure lisibilité du texte et convient à la fois au Web et à l'impression.

3. Archive

Cette police appartient à la famille de polices grotesque sans serif. Il a un aspect propre adapté au corps du texte.

4. Robot

Roboto est l'une des polices les plus couramment utilisées sur le Web moderne. Il a fière allure avec des conceptions Web minimales et offre une excellente lisibilité aux utilisateurs.

5. Montserrat

Montserrat a ses racines dans la typographie urbaine du XXe siècle. Une autre famille de polices très populaire qui vient avec un certain nombre de variantes.

6. Rubik

Très propre, Rubik est une famille de polices sans empattement qui dessert plus de 470 000 sites Web à travers le monde.

7. Source Sans

Vous devez avoir utilisé la famille de polices Source Sans car elle compte plus de 4,18 milliards d'itérations via l'API Google Fonts.

8. Lato

Lato est également une police de caractères Sans Serif et est considérée comme une police professionnelle et claire par les webmasters. Il est utilisé dans presque toutes les positions du contenu.

9. PT Serif

Avec plus d'un million de sites Web utilisant cette police, PT Serif fait partie des polices Google les plus utilisées. Il convient à la fois aux documents Web et imprimés.

10. Ouvrez Sans

La police Open Sans est la plus proche de l'écriture humaine, ce qui facilite la lecture à la fois sur le Web et sur papier. L'API Google Fonts a servi cette police plus de 28,5 milliards de fois en seulement une semaine !

Il existe de nombreuses autres polices Google pour les sites Web WordPress disponibles. Soyez prudent lors de la sélection de la famille de polices car elle peut avoir un impact à la fois positif et négatif sur le lectorat de votre site.

5- Meilleures pratiques d'utilisation des polices Google dans un site Web

L'intégration de WordPress Google Fonts n'est pas sorcier, mais il y a toujours deux façons d'effectuer n'importe quelle tâche – la bonne et la meilleure.

Voyons les meilleures pratiques impliquées dans l'utilisation des polices Google dans WordPress.

– Limiter les poids des polices : la sélection de l'ensemble complet des poids des polices est tentante mais elle a ses inconvénients. Pour chaque variante, l'API devient plus lourde et prend plus de temps pour charger l'ensemble complet de graisses de police.

Ceci est généralement chargé au début de la page Web et, s'il n'est pas optimisé, peut ralentir le temps de chargement initial de votre page Web.

- Héberger les polices localement : la police Google est une bibliothèque en ligne hébergée ailleurs. Bien que cela ait un impact minimal sur les performances de votre site, en cas d'indisponibilité, vous pourrez toujours serveur les polices Google sélectionnées si elles sont hébergées localement.

-L'accessibilité est importante : ce n'est plus une option pour optimiser votre site Web pour les personnes ayant une déficience visuelle. Les polices Google vous permettent de styliser votre police de la manière la plus pratique pour ce type de visiteurs.

Utilisez le contraste qui est facilement lisible sur la plupart des tailles et types d'écran, et qui n'est pas lourd pour l'œil du lecteur. Utiliser des couleurs très vives ou des couleurs très claires n'est pas idéal. Choisissez la couleur et la taille qui conviennent le mieux à la plupart des lecteurs.

Conclusion

L'utilisation de Google Fonts dans WordPress peut vous aider à changer rapidement l'apparence de votre site Web. Que vous essayiez d'opter pour un site d'aspect professionnel ou amusant, il y a de fortes chances que Google Fonts ait la police parfaite pour vous.

Nous vous avons montré comment ajouter manuellement des polices Google à votre site Web à l'aide de la fonction wp_enqueue_style() et du plugin Easy Google Fonts. J'espère que vous êtes maintenant en bonne position pour aller plus loin vous-même.

Avez-vous déjà utilisé une bibliothèque de polices sur votre site WordPress ? Nous aimerions avoir de vos nouvelles, alors faites-le nous savoir en commentant ci-dessous!