3 façons différentes d'ajouter des polices personnalisées au thème de votre site WordPress

Il existe de nombreuses façons intéressantes et personnalisables de rendre votre site Web WordPress plus unique et visuellement attrayant. L'un des moyens consiste à ajouter des polices personnalisées à votre site WordPress. Jetez un oeil à certains des sites Web de vos concurrents. Ils peuvent imiter le même ton et le même style que vous espérez également créer avec votre propre site Web WordPress. Faites attention à leur utilisation des polices. De nombreux sites performants ont tendance à utiliser une poignée de polices soigneusement sélectionnées qui sont utilisées de manière cohérente sur l'ensemble du site Web.

Il existe de nombreuses polices personnalisées disponibles en ligne gratuitement que vous pouvez facilement ajouter à votre propre site. Après avoir trouvé les bonnes polices, vous devrez savoir comment les appliquer à votre site Web. Il existe une gamme de méthodes que vous pouvez essayer pour y parvenir.

Tout d'abord, trouver la bonne police ; il existe d'innombrables sites proposant des milliers de polices gratuites à télécharger. Essayez Google Fonts, TemplateMonster, MyFonts, FontSpring, Cufonfonts, Dafont, Font Squirrel, Edge Web Fonts, 1001 Free Fonts, Fonts.com.

En bref, il existe deux façons principales d'ajouter des polices personnalisées à votre site Web WordPress : manuellement ou avec des plugins.

Ajouter manuellement des polices personnalisées au thème de votre site WordPress

L'ajout manuel de polices personnalisées à votre WordPress peut être bénéfique si vous préférez ne pas risquer de surcharger votre site WordPress avec trop de plugins. Cela peut être accompli en éditant la directive @font-face. Cela vous permet de connecter plusieurs polices de n'importe quel format à votre site.

Cela implique les étapes suivantes :

Étape 1

Tout d'abord, téléchargez les polices personnalisées que vous avez choisies à partir du site Web que vous avez trouvé le plus utile. Une fois le fichier enregistré sur votre ordinateur, extrayez cette archive .zip.

Étape 2

Suite à cela, vous pouvez ensuite télécharger ce fichier de police dans votre serveur d'hébergement WordPress sous le répertoire "wp-content/themes/your-theme-folder/fonts". Si vous n'avez pas encore configuré de dossier désigné pour vos polices personnalisées, créez-en un et enregistrez-le à cet endroit.

Étape 3

Ensuite, rendez-vous dans la zone d'administration de WordPress. Sélectionnez Apparence, puis accédez à l'éditeur de thème. À ce stade, vous verrez le fichier style.css du thème sur votre écran. En dessous, vous devrez ajouter cette section de code :

 @font-face { font-family: Aguafina Script-Regular; src: url(http://test-site.com/wp-content/themes/your-theme-folder/fonts/AguafinaScript-Regular.ttf); font-weight: normal; }

N'oubliez pas de remplacer "URL" et "font-family" dans le code par les valeurs appropriées pour correspondre à la police que vous avez choisie. Vous devez également coller cette section de code au début du fichier CSS mais après le commentaire du thème.

Étape 4

Enfin, assurez-vous de cliquer sur ce bouton important de mise à jour du fichier. Cela garantit que vos modifications sont correctement enregistrées avant de quitter la page.

Étape 5

Ensuite, vous pouvez facilement utiliser la police partout où vous souhaitez l'appliquer dans la feuille de style de votre thème. En utilisant le code suivant :

 .h1 site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }

Maintenant que vous avez modifié ce code de police, chaque fois que quelqu'un se rendra sur votre site Web, la police se chargera. Mais vous ne l'avez pas encore appliqué à un élément particulier de la page. Pour ce faire, vous devez apporter une dernière modification au fichier style.css correspondant auquel vous venez d'accéder. Vous devrez saisir un code comme celui-ci dans le fichier :

 .site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }

Recommandé pour vous : Guide du débutant : Comment installer un thème WordPress ?

Note rapide:

N'oubliez pas, comme précédemment, de modifier la valeur font-family pour qu'elle soit appropriée à la police que vous utilisez.

Si, par exemple, vous utilisez des polices de caractères personnalisées de Google Fonts, vous verrez qu'il existe un onglet nommé @import, qui vous fournit le code approprié pour simplement copier et coller dans le fichier style.css de votre thème. Cela peut rendre l'ensemble du processus beaucoup plus simple si vous n'êtes pas à l'aise avec trop de codage.

Cependant, ce n'est plus une méthode hautement recommandée. Il a rencontré des problèmes de performances, empêchant les navigateurs de télécharger plusieurs feuilles de style en même temps. Cela se traduit par des pages de chargement plus lentes en fin de compte. Gardez donc cela à l'esprit lorsque vous choisissez vos polices et les méthodes pour les utiliser.

D'autre part, l'installation manuelle de polices personnalisées via CSS vous permet de connecter des polices de divers formats, notamment SVG, WOFF, TTF et OTF. Cette méthode vous permet également de travailler sans avoir recours à des services tiers. Vos fichiers de polices seront situés sur votre serveur. C'est le moyen le plus direct d'ajouter des polices personnalisées à WordPress.

Utilisez des plugins pour ajouter des polices personnalisées au thème de votre site WordPress

De nombreuses personnes choisissent d'utiliser des plugins pour inclure leurs polices personnalisées sur leurs sites WordPress, car à bien des égards, cela peut être la méthode la plus simple pour le faire. Cela est particulièrement vrai si vous ne voulez pas vous occuper du codage CSS. Google Fonts est un choix populaire, en grande partie parce qu'il peut être facilement utilisé en tandem avec le plugin WordPress. Les deux meilleures options pour vous sont Easy Google Fonts et Google Fonts Typography. Une fois que vous avez activé l'un de ces plugins, vous pourrez facilement accéder à l'ensemble du catalogue de polices Google Fonts à ajouter à vos pages sans avoir à gérer de code compliqué.

L'utilisation de Google Fonts est le moyen le plus simple de le faire et vous pouvez prévisualiser vos modifications et vos polices personnalisées en temps réel sur l'écran.

Selon les fichiers de police que vous souhaitez utiliser et si vous avez l'intention d'utiliser un seul référentiel ou non, vous pouvez envisager d'utiliser un plugin alternatif, comme le plugin Custom Fonts.

Étape 1

Une fois que vous avez installé le plugin de votre choix et que vous l'avez activé, accédez à Apparence, puis cliquez sur la page de personnalisation, qui ouvrira la page d'interface de personnalisation du thème WordPress en direct. C'est là que vous verrez l'onglet Typographie, qui vous montrera chaque section de votre propre site auquel vous pourrez appliquer vos propres polices personnalisées.

Étape 2

Une fois que vous aurez ouvert cette page, vous pourrez cliquer sur le bouton Modifier la police dans la section de la page que vous souhaitez commencer à modifier. Ensuite, vous pouvez parcourir les différentes sous-sections, en sélectionnant le style de police, la taille, la marge, etc. - ces sections varient en fonction du thème que vous utilisez.

Votre thème peut également signifier que vous ne pourrez pas modifier directement votre sélection de polices pour différentes sections de votre site Web. Il existe cependant une solution simple à ce problème : dirigez-vous simplement vers Paramètres, puis Google Fonts, où vous pouvez créer vos propres contrôles de police. Pour ce faire, entrez simplement un nom de contrôle dans la case et sélectionnez les sélecteurs CSS. Cela vous permet d'ajouter tous les éléments HTML que vous souhaitez cibler pour cette police. Une fois que vous avez entré ces informations, assurez-vous d'enregistrer vos modifications en cliquant sur le bouton Enregistrer le contrôle de la police afin que vos paramètres soient entièrement mis à jour. Vous pouvez ensuite continuer à créer autant de contrôles de polices personnalisés que nécessaire pour chaque section différente de votre site Web WordPress.

Étape 3

Pour utiliser ces nouveaux contrôleurs de police après les avoir créés, revenez simplement à la section Apparence, cliquez sur Personnalisateur, puis cliquez sur l'onglet Typographie. Ensuite, vous verrez l'option intitulée Typographie du thème - lorsque vous cliquez dessus, vous pourrez accéder à vos contrôles de police personnalisés en sélectionnant simplement le bouton Modifier afin que vous puissiez choisir les polices que vous voulez et l'apparence que vous voulez pour ce particulier contrôle. Encore une fois, n'oubliez pas d'enregistrer vos modifications en cliquant sur le bouton Publier ou Enregistrer pour mettre à jour votre site.

Note rapide:

Parmi les autres excellents plugins de polices WordPress personnalisées que nous recommandons, citons Custom Font Uploader et Use Any Font, mais il en existe d'innombrables autres, alors explorez vos options avant de choisir celle que vous souhaitez utiliser.

Vous aimerez peut-être aussi : 20 thèmes WordPress de micro-niche les plus vendus.

Enfin, essayez d'utiliser des thèmes

En plus de ces deux méthodes principales pour ajouter une police et une typographie personnalisées à votre site Web WordPress, vous pouvez également utiliser les thèmes parmi lesquels vous pouvez choisir. Il existe de nombreux thèmes disponibles, dont beaucoup sont livrés avec des options intégrées qui vous permettent de personnaliser vos polices installées. Le processus pour le faire variera selon le thème que vous utilisez. Assurez-vous donc de rechercher le guide approprié pour correspondre à votre thème. Les thèmes WordPress premium de haute qualité offriront également des documents disponibles pour un accès en ligne qui fournissent des directives pour ajouter des polices personnalisées à ce thème particulier.

Les éléments visuels et de conception sont sans doute l'un des facteurs les plus importants dans la création d'un site Web efficace qui attirera l'attention de chaque personne qui le visite. L'une des principales caractéristiques de ce domaine est l'utilisation de polices. Quelle que soit la manière dont vous choisissez d'ajouter des polices personnalisées à votre site Web WordPress, vous devez rechercher et utiliser les polices les plus adaptées au style, au public, au contenu, au thème et au ton de l'ensemble de votre site Web et de votre marque.

 Cet article est écrit par Béatrice Beard. Beatrice est rédactrice professionnelle chez Academic Brits, spécialisée dans une gamme impressionnante de sujets et de domaines. Béatrice est toujours ouverte à partager son expérience personnelle et à donner des conseils d'expert aux écrivains débutants en découvrant tous les nombreux défis et particularités de la création de contenu de haute qualité qui se vend vraiment.