skip to Main Content

Comment ajouter des polices personnalisées sur WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Souhaitez-vous ajouter des polices personnalisées sur WordPress ?

Croyez-moi, la police a également un très grand rôle à jouer sur votre blog et vous gagnerez beaucoup en ajoutant une police adaptée non seulement au contexte de votre blog, mais également à votre thème WordPress.

Dans ce tutoriel, je vous montrerais comment ajouter des polices personnalisées sur votre blog WordPress en utilisant Google Fonts, Typekit et CSS3.

L’utilisation des polices personnalisées dans les thèmes WordPress est devenue commune. En fait, il existe plusieurs thèmes WordPress qui proposent plusieurs polices au choix. Cependant charger toutes ces polices en même temps peut ralentir considérablement le chargement d’une page.

Et si votre blog est lent, je vous propose Quelques solutions aux problèmes de performances sur WordPress

C’est l’une des raisons pour lesquelles nous allons le faire comme il se doit, en chargeant uniquement la police personnalisée que nous souhaitons utiliser sur le blog.

Mais avant toute chose, il est d’abord important de savoir comment rechercher des polices en consultant aussi les 7 plugins WordPress pour prendre en main la typographie de votre blog

Comment rechercher des polices et comment les utiliser sur WordPress

Les polices ne sont plus aussi extensibles qu’avant. Il existe cependant plusieurs sources où retrouver des polices telles que « Google Fonts », « Typekit », « FontSquirrel » et « Fonts.com ».

Comment ajouter une police Google Fonts sur WordPress

Google Fonts est une très grande librairie de polices gratuites que vous pouvez utiliser dans plusieurs projets.
Il vous suffit tout simplement d’accéder à « Google Fonts » et de sélectionner la police de votre choix. Cliquez ensuite sur « select this font »  un onglet apparaît au bas droit de votre écran .

Cliquez sur cet onglet qui s’agrandit comme sur l’image ci-dessus. Vous pourrez personnaliser le style de la police à inclure en cliquant sur Customize. Vous devez uniquement sélectionner le style que vous souhaitez voir sur votre blog.

Vous devez ensuite défiler vers le bas jusqu’à la section « Embed ». Il vous faudra ensuite copier le code situé dans la section « STANDARD ». C’est ce code que vous pourrez ajouter sur le « header » de votre theme enfant.

C’est tout ce qu’il y a à faire pour ajouter une nouvelle police Google Font à votre blog WordPress.

Comment ajouter une police en utilisant TypeKit

Typekit est un autre service gratuit et premium qui propose des polices que vous pouvez utiliser également dans vos différents projets. Ils offrent des abonnements premium et des abonnements gratuits.

Il vous suffit tout simplement d’avoir un compte Typekit et de créer un nouveau « kit ».

Il vous faudra ensuite sélectionner la police de la librairie Typekit et l’ajouter à votre projet. Après cela, récupérez le code de votre kit et ajoutez-le depuis votre tableau de bord.

Démarrez la promotion de votre blog

Téléchargez des dizaines de Logos, bannières, modèles de sites web et de nombreux autres outils marketing pour faire connaître votre Blog WordPress. [Recommandé]

Pour l’ajouter à votre tableau de bord, vous devez tout simplement installer et activer le plugin « Typekit Fonts for WordPress ».

Après son activation, il vous suffit tout simplement d’accéder à la section « Settings > Typekit Fonts » et de coller le code de votre kit dans la section « custom CSS rules ».

typekit-coller-un -kit

La police pourra ensuite être utilisée de la même façon, c’est-à-dire en précisant le nom de la famille pour des éléments précis ou pour tout le document.

Comment ajouter une police en utilisant le CSS3 (@font-face)

Le moyen le plus direct pour intégrer une police à votre blog, est de l’ajouter en utilisant les « font-faces » via le CSS3. Cette méthode vous permet d’ajouter n’importe quel type de police de votre choix sur votre blog.

La première chose à faire est de télécharger la police de votre choix au format Web. Si vous n’avez pas cette police au format web, alors vous pouvez gratuitement la convertir sur « FontSquirrel Webfont Generator ».

Une fois que vous aurez les fichiers au format « web », il vous faudra ensuite les envoyer directement sur votre serveur. Je vous recommande vivement de l’ajouter dans le dossier « fonts » de votre child theme en utilisant un client FTP (FileZilla est ma recommandation).

Si vous souhaitez aller plus loin dans cette procédure consultez notre tutoriel sur Comment utiliser le FTP sur Windows 10

Revenons à notre objectif.

Une fois que c’est fait, vous pourrez intégrer la police de cette façon :

integration-police

Pour l’utiliser n’importe où, il vous faudra tout simplement définir le nom de la police tel que vous l’avez spécifié dans le « font-face » précédent (voir valeur de l’attribut font-family ).

utilisation-code-font-face

C’est tout ce qu’il y avait à savoir sur l’utilisation du code CSS3. Je dois cependant préciser que la méthode avec la fonctionnalité « font-face » est plus adaptée aux développeurs.

D’autres solutions et outils sont aussi utilisés et conseillés pour gérer ou manipuler les polices sur votre site web. Ci-dessous, nous allons vous proposer 3 plugins WordPress qui vous aideront à ajouter facilement des polices personnalisées sur WordPress.

1. Divi Builder

Divi Builder est un constructeur de pages de grande qualité très apprécié par Elegant Themes. Bien qu’il soit généralement utilisé dans le cadre du thème WordPress Divi, Divi Builder est également un plugin autonome que vous pourrez utiliser sur d’autres thèmes WordPress.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Contrairement aux deux constructeurs précédents, Divi Builder vous permet de modifier votre contenu à l’aide d’une interface visuelle sur le front-end ainsi que d’une interface sur le back-end, bien que la plupart des utilisateurs préfèrent la première interface.

Fondamentalement, au lieu des barres latérales, tout est dans des popups et des boutons flottants. Il vous donne accès à 316 modèles prédéfinis répartis sur 40 différents packs de présentation, ainsi qu’à la possibilité d’enregistrer vos propres conceptions en tant que modèles.

L’un des traits de Divi a toujours été le contrôle des styles qu’il vous donne. Sur trois onglets différents, vous avez la possibilité de configurer divers paramètres, notamment des contrôles responsive, un espacement personnalisable, etc…

Vous pourrez même ajouter du CSS personnalisé, car son éditeur CSS intègre la validation de base et l’auto-complétion. L’une des critiques de Divi Builder a toujours été qu’il repose sur des shortcodes. Ce qui signifie que si vous le désactivez un jour, il laissera un tas de shortcodes dans votre contenu. Bien que cela soit un peu déprimant, cela pose moins de problème maintenant que des plugins comme Shortcode Cleaner existent.

Télécharger | Démo | Hébergement Web

2. Divi Builder

Divi Builder est un constructeur de pages de grande qualité très apprécié par Elegant Themes. Bien qu’il soit généralement utilisé dans le cadre du thème WordPress Divi, Divi Builder est également un plugin autonome que vous pourrez utiliser sur d’autres thèmes WordPress.

Contrairement aux deux constructeurs précédents, Divi Builder vous permet de modifier votre contenu à l’aide d’une interface visuelle sur le front-end ainsi que d’une interface sur le back-end, bien que la plupart des utilisateurs préfèrent la première interface.

Fondamentalement, au lieu des barres latérales, tout est dans des popups et des boutons flottants. Il vous donne accès à 316 modèles prédéfinis répartis sur 40 différents packs de présentation, ainsi qu’à la possibilité d’enregistrer vos propres conceptions en tant que modèles.

L’un des traits de Divi a toujours été le contrôle des styles qu’il vous donne. Sur trois onglets différents, vous avez la possibilité de configurer divers paramètres, notamment des contrôles responsive, un espacement personnalisable, etc…

Vous pourrez même ajouter du CSS personnalisé, car son éditeur CSS intègre la validation de base et l’auto-complétion. L’une des critiques de Divi Builder a toujours été qu’il repose sur des shortcodes. Ce qui signifie que si vous le désactivez un jour, il laissera un tas de shortcodes dans votre contenu. Bien que cela soit un peu déprimant, cela pose moins de problème maintenant que des plugins comme Shortcode Cleaner existent.

Télécharger | Démo | Hébergement Web

3. WPBakery Page Builder

WPBakery Page Builder, anciennement connu sous le nom de Visual Composer, est un autre constructeur de pages premium et extrêmement populaire. Une grande partie de cette popularité provient du fait que WPBakery Page Builder est livré avec près de 99% des thèmes WordPress de ThemeForest. Mais il n’en reste pas moins qu’il est utilisé sur un très grand nombre de sites web.


A l’instar de Divi Builder, WPBakery Page Builder vous permet à la fois une édition visuelle et une édition dans le back-end. Comparé à quelque chose comme Elementor ou Divi Builder, les options de style de WPBakery Page Builder sont un peu limitées. Vous avez un bon contrôle sur les lignes, mais les options de style pour les éléments individuels sont un peu plus limitées.

Si vous souhaitez utiliser votre propre CSS, vous pourrez ajouter une classe ou un identifiant CSS personnalisé à des éléments individuels, ou vous pourrez ajouter des styles réels au niveau de la page.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Je ne suis pas sûr que WPBakery Page Builder possède des fonctionnalités uniques particulièrement remarquables. Mais ce qu’il a, c’est une énorme communauté d’extensions. Comme Divi Builder, WPBakery Page Builder laisse derrière lui une multitude de shortcodes dans votre contenu si vous le désactivez. Découvrir le tutoriel

Télécharger | Démo | Hébergement Web

Autres ressources recommandées

Allez plus loin dans l’utilisation des polices personnalisées sur WordPress en consultant aussi les liens ou les ressources recommandées ci-dessous.

Conclusion

Voilà ! C’est tout pour ce tutoriel consacré à la meilleure façon d’ajouter des polices personnalisées sur WordPress. Si vous avez des suggestions ou des commentaires, ils seront les bienvenues.

N’hésitez pas à partager l’astuce avec vos amis et nous vous invitons aussi à consulter nos ressources si vous êtes un blogueur débutant

… 

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
10 Partages
Partagez6
Tweetez
Enregistrer4