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 701.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.

comment ajouter polices personnalisees wordpress 1 1

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

Typography WordPress fonts google

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 .

Google Fonts typographie tutoriel wordpress

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 thème 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.Typography WordPress fonts typekit 2

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

Typography WordPress fonts typekit

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 ]

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.

Typography WordPress fonts typekit 1

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 « fond-face » précédent (voir valeur de l’attribut font-family ).

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]

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.

Découvrez aussi quelques plugins WordPress premium  

Vous pouvez utiliser d’autres plugins WordPress pour donner une apparence moderne et pour optimiser la prise en main de votre blog ou site web.

Nous vous proposons donc ici quelques plugins WordPress premium qui vous aideront à le faire.

1. CommentPress

CommentPress est un plugin puissant WordPress compact qui vous permet d’insérer, de modifier et de supprimer des commentaires rapidement et facilement. CommentPress utilise Ajax, jQuery et PHP pour donner la possibilité aux visiteurs d’insérer des commentaires sans avoir à recharger la page.CommentPress Ajax Comments Insert Edit and Delete Comments

Ce plugin possède de nombreuses options de personnalisation, enfin de lui donner le look et l’apparence que vous souhaitez. Il possède un captcha pour bloquer les spams et apporte à votre section commentaire plus de sécurité.

Ses principales fonctionnalités sont : l’insertion facile des commentaires, la possibilité donnée aux utilisateurs de répondre à des commentaires spécifiques, la pagination des commentaires, la gestion complète de l’administration de la section commentaires, des boutons d’insertion facile des images, des vidéos et des liens, une mise en page entièrement responsive, un Captcha pour sécuriser le formulaire et éviter le spam, et beaucoup plus.

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

2. Everest Gallery

Comme son nom l’indique, c’est le summum des plugins WordPress premium de galerie photo. Cet outil ultra-personnalisable vous permettra de créer des galeries de tout style   en quelques minutes seulement.

Everest Gallery Responsive WordPress Gallery Plugin wordpress

Everest Gallery peut être utilisé pour présenter des articles, des types de publications personnalisées, des taxonomies/catégories personnalisées, des produits WooCommerce, des produits personnalisés, des galeries d’images et pièces jointes, des vidéos, les caractéristiques des produits, la vitrine des clients, des portfolios, les membres de l’équipe, des captures d’écran, etc…, entièrement responsive.

Everest Gallery est livré avec une documentation complète, et plus de 30 options pour personnaliser complètement l’apparence de la galerie. Avec les options de personnalisation disponibles, vous pouvez utiliser ce plugin WordPress pour présenter quoi que ce soit facilement et efficacement. 

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

3. WP Media Manager

WP Media Manager est l’un des meilleurs et des plus performants plugins WordPress de gestion de la bibliothèque de médias. Il est excellent dans la gestion des dossiers et sa facilité d’utilisation vous permet d’organiser vos milliers de fichiers multimédias.

WP Media Manager The Easiest WordPress Media Manager Plugin

Utilisez simplement la méthode drag and drop pour insérer les fichiers multimédia dans des dossiers / sous-dossiers.Ce faculté lui permet non seulement d’améliorer la gestion des fichiers, mais permet également de gérer des dossiers. Ce qui est généralement un must pour les utilisateurs novices.

Ce plugin WordPress possède des fonctionnalités telles que la création des dossiers, le filtrage de ceux-ci, 3 magnifiques galerie responsive, la possibilité de dupliquer les fichiers, la création d’une hiérarchie illimitée et bien d’autres…

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

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.

Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.

N’hésitez surtout à le partager sur vos différents réseaux sociaux. Si vous avez des commentaires ou des suggestions, n’hésitez pas à nous en faire part dans la section réservée à ces derniers.

… 

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse e-mail 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