Comment ajouter des polices personnalisées dans WordPress

Voulez-vous ajouter des polices personnalisées dans WordPress? Les polices personnalisées peuvent vous aider à rafraîchir votre thème et à vous démarquer. Dans cet article, nous allons vous montrer comment ajouter des polices personnalisées dans WordPress à l'aide de la méthode Google Fonts, TypeKit et CSS3 @ Font-Face..

L'utilisation de polices personnalisées dans les thèmes WordPress est devenue une tendance commune. En fait, certains thèmes sont entièrement chargés avec des centaines de polices personnalisées. Cependant, charger trop de polices peut ralentir votre site Web. C'est pourquoi nous allons vous montrer comment charger correctement les polices personnalisées afin de ne pas ralentir votre site..

Mais avant de regarder comment ajouter des polices personnalisées dans WordPress, examinons la recherche de polices personnalisées..

Comment trouver des polices personnalisées à utiliser dans WordPress

Auparavant, les polices étaient chères, mais pas plus. Il existe de nombreux endroits pour trouver d'excellentes polices Web gratuites telles que Google Fonts, Typekit, FontSquirrel et fonts.com..

Si vous ne savez pas comment mélanger et faire correspondre les polices, essayez ensuite Pair Pair. Il aide les concepteurs à associer de belles polices Google..

Lorsque vous choisissez vos polices, n’oubliez pas qu’utiliser trop de polices personnalisées ralentira votre site Web. C'est pourquoi vous devez sélectionner deux polices et les utiliser tout au long de votre conception. Cela apportera également de la cohérence à votre conception.

Didacticiel vidéo

Si vous n'aimez pas la vidéo ou si vous avez besoin de plus d'instructions, continuez à lire..

Ajout de polices personnalisées dans WordPress à partir de Google Fonts

Google Fonts est la bibliothèque de polices la plus importante, gratuite et la plus utilisée par les développeurs de sites Web. Vous pouvez ajouter et utiliser Google Fonts de différentes manières dans WordPress..

Méthode 1: Ajout de polices personnalisées à l'aide du plug-in Easy Google Fonts

Si vous souhaitez ajouter et utiliser Google Fonts sur votre site Web, cette méthode est de loin la plus simple et la plus recommandée pour les débutants..

La première chose à faire est d’installer et d’activer le plug-in Easy Google Fonts. Pour plus de détails, consultez notre guide étape par étape pour installer un plugin WordPress..

Lors de l'activation, vous pouvez aller à Apparence »Personnalisateur page. Cela ouvrira l'interface de personnalisation de thème en direct où vous verrez la nouvelle section Typographie.

En cliquant sur Typographie, vous afficherez différentes sections de votre site Web où vous pourrez appliquer Google Fonts. Cliquez sur 'Modifier la police' sous la section à modifier..

Dans la section famille de polices, vous pouvez choisir la police Google que vous souhaitez utiliser sur votre site Web. Vous pouvez également choisir le style de police, la taille de la police, le remplissage, la marge, etc..

En fonction de votre thème, le nombre de sections ici peut être limité et il est possible que vous ne puissiez pas modifier directement la sélection des polices pour de nombreux domaines de votre site Web..

Pour résoudre ce problème, le plugin vous permet également de créer vos propres contrôles et de les utiliser pour modifier les polices de votre site Web..

Tout d'abord, vous devez visiter Paramètres »Google Fonts page et donnez un nom à votre contrôle de police. Utilisez quelque chose qui vous aide à comprendre rapidement où vous utiliserez ce contrôle de police.

Cliquez sur le bouton 'Créer un contrôle de police' et vous serez invité à entrer des sélecteurs CSS. Vous pouvez ajouter des éléments HTML que vous souhaitez cibler (par exemple, h1, h2, p, blockquote) ou utiliser des classes CSS. Vous pouvez utiliser l'outil Inspecter pour savoir quelles classes CSS sont utilisées par la zone particulière que vous souhaitez modifier..

Cliquez maintenant sur le bouton "Enregistrer le contrôle de la police" pour enregistrer vos paramètres. Vous pouvez créer autant de contrôleurs de polices que nécessaire pour différentes sections de votre site Web..

Pour utiliser ces contrôleurs de polices, vous devez vous rendre à Apparence »Personnalisateur et cliquez sur l'onglet Typographie.

Sous Typographie, vous verrez également une option "Thème Typographie". Cliquez dessus pour afficher les contrôles de police personnalisés que vous avez créés précédemment. Vous pouvez maintenant simplement cliquer sur le bouton d'édition pour sélectionner les polices et l'apparence de ce contrôle..

N'oubliez pas de cliquer sur le bouton Enregistrer ou Publier pour enregistrer vos modifications..

Méthode 2: ajouter manuellement des polices Google dans WordPress

Cette méthode nécessite que vous ajoutiez du code à vos fichiers de thème WordPress. Si vous ne l'avez pas déjà fait auparavant, consultez notre guide sur la copie et le collage de code dans WordPress..

Tout d'abord, visitez la bibliothèque de polices de Google et sélectionnez la police que vous souhaitez utiliser. Ensuite, cliquez sur le bouton d'utilisation rapide sous la police..

Cela vous mènera à une autre page où il vous sera demandé de choisir les styles que vous souhaitez utiliser. Vous ne devez sélectionner que les styles que vous pensez réellement utiliser.

Après cela, faites défiler un peu jusqu'à la section de code d'intégration. Vous devez copier le code incorporé sous l'onglet standard et le coller dans le fichier header.php de votre thème ou de votre thème enfant juste après la balise..

C'est tout ce que vous avez ajouté avec succès une police Google personnalisée dans votre site WordPress.

Vous pouvez utiliser cette police dans la feuille de style de votre thème comme ceci:

 .h1 site-title font-family: 'Open Sans', Arial, sans-serif;  

Pour des instructions plus détaillées, consultez notre guide sur la procédure d’ajout de polices Google dans les thèmes WordPress..

Ajout de polices personnalisées dans WordPress à l'aide de Typekit

Typekit est une autre ressource gratuite et premium pour des polices géniales que vous pouvez utiliser dans vos projets de conception. Ils ont un abonnement payant ainsi qu'un plan d'abonnement gratuit limité que vous pouvez utiliser.

Ouvrez simplement un compte Typekit et créez un nouveau kit.

Ensuite, vous devez sélectionner une police dans la bibliothèque Typekit et l’ajouter à votre kit. Après cela, récupérez le code d'intégration de votre kit et rendez-vous dans la zone d'administration de votre site WordPress.

Maintenant, vous devez installer et activer le plugin Typekit Fonts for WordPress. Lors de l'activation, il suffit de visiter Paramètres »Polices Typekit et collez le code incorporé sur la page des paramètres du plugin.

C'est tout, vous pouvez maintenant utiliser la police Typekit que vous avez sélectionnée dans la feuille de style de votre thème WordPress comme ceci:

 h1 .site-title font-family: 'modesto-condensé', Arial, sans-serif;  

Pour des instructions plus détaillées, consultez notre tutoriel sur la façon d’ajouter une typographie géniale dans WordPress avec Typekit.

Ajout de polices personnalisées dans WordPress à l'aide de CSS3 @ font-face

Le moyen le plus direct d’ajouter des polices personnalisées dans WordPress est d’ajouter les polices à l’aide de CSS3. @ font-face méthode. Cette méthode vous permet d’utiliser toute police que vous aimez sur votre site Web..

La première chose à faire est de télécharger la police de votre choix dans un format Web. Si vous n'avez pas le format Web pour votre police, vous pouvez le convertir à l'aide du générateur FontSquirrel Webfont..

Une fois que vous avez les fichiers webfont, vous devez les télécharger sur votre serveur d’hébergement Web..

Le meilleur endroit pour télécharger les polices est dans un nouveau dossier «polices» dans votre thème ou le répertoire de votre thème enfant..

Vous pouvez utiliser FTP ou le gestionnaire de fichiers de votre cPanel pour télécharger la police..

Une fois que vous avez chargé la police, vous devez la charger dans la feuille de style de votre thème à l'aide de la règle CSS3 @ font-face de la manière suivante:

 @ font-face font-family: Arvo; src: url (http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); poids de police: normal;  

N'oubliez pas de remplacer la famille de polices et l'URL par les vôtres.

Après cela, vous pouvez utiliser cette police n'importe où dans la feuille de style de votre thème, comme ceci:

 .h1 site-title font-family: "Arvo", Arial, sans-serif;  

Charger des polices directement à l'aide de CSS3 @ font-face n'est pas toujours la meilleure solution. Si vous utilisez une police de Google Fonts ou Typekit, il est préférable de la servir directement à partir de leur serveur pour des performances optimales..

C’est tout, nous espérons que cet article vous a aidé à ajouter des polices personnalisées dans WordPress. Vous pouvez également consulter notre guide sur l'utilisation des polices d'icônes dans WordPress et sur la modification de la taille de la police dans WordPress..

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Facebook.