Comment changer les polices dans WordPress (étapes rapides et faciles)
Vous souhaitez changer la police de votre site WordPress ? Vous vous demandez comment changer les polices et personnaliser l’apparence complète de votre site WordPress ? Vous voulez connaître les différentes manières de changer la police
C’est incroyable à quel point un simple changement de typographie peut faire toute la différence.
Qu’il s’agisse de l’utilisation d’une police décontractée et amusante telle que Comic Sans ou d’une police plus professionnelle et sérieuse telle que Helvetica, une police de caractères peut avoir un impact énorme sur la façon dont votre site Web est perçu.
Heureusement, changer la police
Mais que se passe-t-il si votre thème n’a pas la police souhaitée ? Pouvez-vous ajouter des polices supplémentaires à un thème WordPress ?
Nous couvrirons tout cela et bien plus encore
Nous expliquerons également comment modifier la police à l’aide d’un générateur de pages, d’un éditeur WordPress, de CSS, d’un personnalisateur de thème et bien plus encore.
Vous souhaitez modifier les polices WordPress pour des éléments de contenu spécifiques ? Nous avons également ce qu’il vous faut !
Que sont les polices et comment fonctionnent-elles ?
Une police représente les lettres et les chiffres du motif et contient ses détails de style, tels que les polices de caractères, les tailles en points, les couleurs, les épaisseurs ou même les motifs.
Quelques exemples de polices incluent Arial 12 pt, Verdana 10 pt bold, Times New Roman 14 pt italic, Roboto, Georgia et plusieurs milliers d’autres.
En règle générale, nous connaissons les polices Arial ou Verdana, mais la police inclut également la taille « 12 pt » et les détails de style « gras » ou « italique ».
Super! Nous savons donc ce qu’est une police. Si vous envisagez d’acheter une police en ligne, vous remarquerez que beaucoup d’entre elles sont vendues en famille. Alors, qu’est-ce qu’une famille de polices ?
Prenons un exemple pour clarifier cela.
Si vous utilisez MS Word ou Google Docs, vous pouvez facilement changer le texte en gras, italique ou même gras italique. Ce sont différentes variantes de la même police et constituent une famille de polices.
Comme indiqué ci-dessous, voici un exemple de la famille de polices « Roboto ».
Roboto est une famille composée de plusieurs polices, telles que :
Roboto Regular
Roboto Mince 100
Roboto Thin 100 Italique
Lumière Robot 300
Roboto Light 300 Italique
Roboto Régulier 400
Roboto Regular 400 italique
Roboto Moyen 500
Roboto Medium 500 italique
Roboto Bold 700
Roboto Bold 700 italique
Robot Noir 900
Roboto Noir 900 italique
Une famille de polices comprend toutes les variantes de polices dont vous pourriez avoir besoin pour créer des documents, des pages Web, des publications et tout contenu écrit.
Voyons quelques terminologies couramment utilisées liées aux polices.
Que sont les polices Web ?
Comme leur nom l’indique, les polices Web sont explicitement destinées au Web. Ils résident sur un serveur Web et sont téléchargés
Les polices Web nécessitent quatre types de fichiers pour se charger correctement. Il s’agit d’un fichier TrueType, d’un fichier EOT, d’un fichier WOFF et d’un fichier SVG. Chacun de ces fichiers est conçu pour des navigateurs spécifiques.
Pour garantir que les polices de votre site Web s’affichent correctement
Que sont les polices hébergées localement ?
Nous pensons que le nom dit tout. Les polices hébergées localement sont celles que vous trouvez sur votre système local. Cela peut inclure votre ordinateur, votre téléphone ou le serveur sur lequel tout votre site Web est hébergé.
En termes simples, les polices hébergées localement surviennent lorsque tous vos fichiers et polices se trouvent ensemble
Que sont les polices Web sécurisées ?
Les options de police étaient assez limitées au début. Si vous avez hébergé une nouvelle police localement et l’avez référencée sur votre site Web, il est probable que le texte de vos pages soit différent selon les navigateurs.
Les polices sécurisées pour le Web garantissent que votre site Web a la même apparence sur tous les navigateurs, car chaque navigateur est compatible avec elles. Ainsi, quel que soit le navigateur utilisé
Des exemples de polices sécurisées pour le Web incluent Arial, Times New Roman, Verdana, Helvetica et Georgia.
Que sont les polices Google ?
Actuellement, Google Fonts est une collection de 1 357 familles de polices gratuites, commodément utilisées via CSS et Android.
Grâce à l’API Google Fonts, vous accédez à toute la bibliothèque de polices et d’icônes open source. De cette façon, vous pouvez utiliser la vaste bibliothèque de Google pour n’importe lequel de vos projets.
Pour utiliser Google Fonts sur vos pages Web, vous devez ajouter un lien de feuille de style pour référencer la ou les polices souhaitées, comme suit.
Ainsi, que vous ayez une bande passante lente ou des problèmes de connectivité, vos pages et vos polices se chargeront parfaitement sur tous les navigateurs.
Qu’est-ce que Font Awesome ?
Font Awesome est une boîte à outils de polices et d’icônes conçue pour être utilisée avec des éléments en ligne. Les éléments couramment utilisés pour les icônes sont <i> et <span>.
Pour utiliser Font Awesome, ajoutez la ligne de code suivante
Vous n’avez pas besoin de télécharger ou d’installer quoi que ce soit. Pour utiliser les icônes Font Awesome, préfixez simplement fa et le nom de l’icône.
En modifiant la taille ou la couleur de la police, l’icône change en conséquence.
Comment changer les polices WordPress
La plupart des thèmes WordPress vous permettent de personnaliser les polices à l’aide du personnalisateur natif. Bien que cela puisse varier légèrement selon les thèmes, nous allons vous montrer comment modifier la police WordPress à l’aide de notre thème Astra.
Nous vous expliquerons comment utiliser l’éditeur Gutenberg
Comment modifier les polices WordPress
Pour changer la police
Vous pouvez facilement le mettre en gras ou en italique en sélectionnant le texte. Pour modifier la typographie, utilisez les paramètres sur le côté droit de votre éditeur.
Vous pouvez également modifier la taille de la police à l’aide du champ personnalisé fourni.
Vous souhaitez changer la couleur de la police ? Aucun problème!
Sélectionnez simplement la couleur du texte souhaitée
De cette façon, vous pouvez remplacer les paramètres
Comment modifier les polices WordPress
Ensuite, allonsmodifiez les polices WordPress à l’aide du générateur de pages Elementor. Le générateur de pages facilite grandement la modification de la police à l’aide des paramètres du widget.
Pour changer la police, ouvrez la publication ou la page que vous souhaitez modifier à l’aide d’Elementor.
Cliquez ensuite sur l’icône
Sélectionnez l’onglet Style puis cliquez sur l’icône Typography.
Le constructeur de pages Elementor propose plusieurs options pour éditer du texte. En utilisant les paramètres sous Typographie, vous pouvez modifier la famille de polices, augmenter la taille de la police, modifier la hauteur des lignes et l’espacement des lettres, incorporer divers styles et bien plus encore.
Une fois que vous avez effectué vos modifications, cliquez sur le Bouton Mettre à jour pour enregistrer et mettre en ligne vos modifications.
Comment modifier les polices WordPress
Regardons un autre constructeur de pages, le constructeur de pages Brizy.
Ouvrez la page ou la publication en utilisant Brizy et sélectionnez le texte que vous souhaitez modifier.
Comme vous pouvez le voir
Une fois que vous avez terminé, cliquez sur Update.
Et c’est aussi simple qu’il est de changer les polices à l’aide de Gutenberg et des constructeurs de pages Elementor et Brizy !
Comment modifier les polices WordPress à l’aide du personnalisateur de thème
Les options utilisées ci-dessus fonctionnent parfaitement lors de la modification des polices d’éléments et de blocs individuels.
Mais que se passe-t-il si vous souhaitez appliquer des modifications de police sur votre site Web ?
La bonne nouvelle est que cela peut être fait rapidement à l’aide du personnalisateur de thème.
Rendez-vous sur Apparence > Personnaliser pour accéder au personnalisateur WordPress.
Vous devrez localiser les paramètres de typographie du thème pour que cela fonctionne. Vous devrez peut-être regarder autour de vous car cela varie en fonction du thème que vous utilisez.
Si vous utilisez le thème Astra, cliquez sur Global puis sur l’onglet Typography.
De la modification des préréglages et de la famille de polices à l’augmentation de la taille, de l’épaisseur, de la hauteur des lignes et même de l’espacement des lignes, vous disposez de nombreuses options pour personnaliser le texte de votre site Web.
Vous souhaitez personnaliser et modifier la police des en-têtes individuels ? Aucun problème!
De H1 à H6, vous pourrez modifier la police de chaque balise de titre, comme vous le souhaitez.
L’avantage de l’utilisation du personnalisateur WordPress est de voir les modifications que vous apportez en temps réel. De cette façon, vous décidez de ce qui fonctionne le mieux pour votre site avec un aperçu en direct.
Une fois que vous êtes satisfait de toutes les modifications, cliquez sur Publier pour enregistrer les modifications.
Comment modifier les polices WordPress à l’aide d’un plugin
Que faire si votre thème n’a pas la police souhaitée ? Ou peut-être que votre thème n’a pas du tout la possibilité de changer les polices ?
Il existe plusieurs plugins qui améliorent les options de typographie de votre site. Lors de la sélection d’un plugin de police WordPress, nous vous recommandons d’en rechercher un qui vous permet d’utiliser Google Fonts.
Le plugin Easy Google Fonts vous permet d’ajouter facilement des Google Fonts à votre thème sans avoir à ajouter une seule ligne de code. Vous pouvez également prévisualiser les modifications que vous apportez en temps réel à l’aide du personnalisateur WordPress.
Pour utiliser ce plugin, installez Easy Google Fonts sur votre site WordPress.
Après avoir installé le plugin, rendez-vous sur Apparence > Personnaliser.
Accédez à Typographie > Typographie
Vous pouvez désormais modifier la police de chaque élément de votre site Web. Des paragraphes aux balises d’en-tête. Personnalisez-les comme vous le souhaitez, puis enregistrez les modifications.
Vous disposez de plusieurs options de personnalisation des polices avec lesquelles jouer. Vous pouvez également styliser et positionner votre texte exactement comme vous le souhaitez.
Une fois les modifications terminées, cliquez sur Publish.
Vous souhaitez ajouter des contrôles de police personnalisés ?
Le plugin Easy Google Fonts vous permet de changer la police des éléments
Mais que se passe-t-il si vous souhaitez modifier la police d’un élément blockquote ?
Le plugin Easy Google Fonts rend cela facile. Cependant, vous aurez besoin de connaître un peu de CSS pour cela. Au moins, vous devrez connaître le nom du conteneur CSS.
Le moyen le plus simple d’identifier le nom du conteneur consiste à charger une page Web, à cliquer avec le bouton droit sur la police et à sélectionner Inspect.
Sous l’onglet Styles , vous remarquerez le nom du conteneur, qui
Une fois que vous avez identifié le nom du conteneur, accédez à Paramètres > Easy Google Fonts.
Entrez un nom pour votre contrôle de police. Ceci est uniquement pour votre référence.
Ensuite, sous les sélecteurs CSS de contrôle des polices, ajoutez votre sélecteur CSS.
Une fois que vous avez terminé, cliquez sur Créer un contrôle de police.
Maintenant, revenez à Apparence > Personnaliser > Typographie.
Vous trouverez maintenant un onglet supplémentaire, Theme Typography.
Cliquez sur Typographie du thème.
Vous remarquez le contrôle de police personnalisé que vous venez d’ajouter ?
Désormais, vous pouvez facilement personnaliser et modifier la police de n’importe quel élément de votre site WordPress sans écrire de code !
Comment modifier les polices WordPress à l’aide de CSS
Si vous êtes à l’aise pour écrire un peu de code, une autre façon de modifier la police
Cependant, vos modifications disparaîtront si vous basculez entre les thèmes WordPress. Il sera donc utile de copier votre code CSS avant d’installer un nouveau thème.
Sans ouvrir les feuilles de style de votre site Web, vous pouvez facilement ajouter du CSS via WordPress Customizer.
Accédez à Apparence > Personnalisez > CSS__HTML_TAG_277___ supplémentaire et placez votre code CSS.
Disons que vous souhaitez personnaliser la balise H1.
Le code CSS sera le suivant,
h1{
famille de polices : verdana ;
taille de police : 30 px ;
couleur : #FF0000 ;
}
Cela remplacera la balise H1 sur votre site
De même, si vous souhaitez changer la police de la balise de paragraphe en taille 20 et en couleur blanche (#FFFFFF), le CSS sera :
p {
taille de police : 20 px ;
couleur : #FFFFFF ;
}
Bien qu’il soit assez simple de modifier les polices à l’aide de CSS, cela vous aidera certainement si vous savez coder.
Comment modifier les polices WordPress à l’aide d’un générateur de pages
Nous avons expliqué plus tôt comment modifier les polices à l’aide du générateur de pages Elementor et Brizy. Cependant, il s’agissait d’un élément individuel.
Pendant que cela fonctionne, vous souhaiterez peut-être modifier la police sur toutes les pages de votre site Web WordPress à l’aide d’un générateur de pages.
Page builders make this super easy. Nous utiliserons le générateur de pages Elementor pour expliquer comment.
Un moyen simple consiste à ouvrir n’importe quelle publication ou page à l’aide de l’éditeur Elementor.
Cliquez ensuite sur les trois lignes en haut à gauche de votre éditeur.
Cliquez maintenant sur Paramètres du site.
Vous pouvez modifier la police de vos en-têtes principaux et secondaires, ainsi que le texte et l’accent. Une fois que vous êtes satisfait de l’aperçu en direct, cliquez sur Update pour enregistrer les modifications.
Et c’est aussi simple que de changer les polices à l’aide d’un générateur de pages !
Comment héberger des polices locales
Next, we’ll learn how to host local fonts in WordPress. Mais avant d’aborder le comment, comprenons le pourquoi.
Pourquoi devrions-nous héberger les polices localement
La réponse simple est la vitesse des pages. Les polices Google et autres polices externes ne sont pas hébergées sur votre site Web. Ainsi, chaque fois qu’un utilisateur accède à une page, le navigateur doit envoyer une requête HTTP à Google ou à l’hébergeur de la police pour obtenir une copie de la police.
Chaque requête HTTP ajoute du travail supplémentaire au navigateur et ralentit le chargement des pages. Ni l’un ni l’autre n’aident l’expérience utilisateur !
L’hébergement local des polices signifie que le navigateur peut télécharger le fichier de police avec la page sans faire de demandes supplémentaires.
Le résultat est un temps de chargement des pages plus rapide, un boost potentiel pour votre référencement et des visiteurs satisfaits !
Pour héberger vos polices localement, commencez
Créez ensuite un dossier nommé « polices » sur votre serveur à l’aide d’un client FTP, tel que FileZilla ou le gestionnaire de fichiers de votre panneau de contrôle d’hébergement.
Téléchargez maintenant tous vos fichiers de polices
Disons que vous avez téléchargé une police « Roboto-Black.ttf »
Nous devrons référencer cette URL
Vous pouvez soit modifier le CSS personnalisé, soit utiliser un plugin gratuit, tel que Simple Custom CSS et JS. A l’aide du plugin, insérez le code suivant :
@font-face {
famille de polices : 'Roboto-Black' ;
src : url('https://domainname.com/fonts/Roboto-Black.ttf') format('ttf');
poids de la police : normal ;
style de police : normal ;
}
Bien entendu, vous remplaceriez « nom de domaine »
Et les styles de police ? Oui, vous devrez également les mettre à jour.
Voici un exemple du code que vous pourriez utiliser :
body {famille de polices : 'Roboto-Black', Arial, sans-serif ;}
N’oubliez pas de sauvegarder et de mettre à jour les pages lorsque vous avez terminé.
Il est important de mentionner que si les Google Fonts sont déjà intégrées à votre thème WordPress, vous n’aurez pas besoin de les héberger localement.
Comment héberger les polices Google localement
L’hébergement local de Google Fonts
L’ensemble du processus est encore plus simple en utilisant un outil gratuit, tel que google-webfonts-helper, qui génère le code CSS réel requis pour votre site WordPress.
Pour commencer, décidez de la police que vous souhaitez héberger localement.
Ensuite, sélectionnez les styles souhaités. Nous utiliserons les styles de police réguliers et gras (800).
Vous remarquerez que le code CSS est prêt, alors copiez-le.
Faites défiler vers le bas et téléchargez les fichiers.
Le fichier .ZIP comprend différents formats de fichiers, tels que EOT, TTF, SVG, WOFF et WOFF2.
Une fois le fichier téléchargé, répétez le processus décrit précédemment, connectez-vous à votre serveur en direct, créez un nouveau dossier appelé polices et téléchargez les fichiers.
Bien que ces étapes soient assez simples, le thème Astra les rend encore plus simples.
Astra est livré avec une fonctionnalité Google Fonts auto-hébergée intégrée.
Tout ce que vous avez à faire est de cliquer sur l’option « Charger les polices Google localement » sous Apparence > Personnaliser > Performances pour l’activer.
En activant cette fonctionnalité, vous n’enverrez qu’une seule requête API Google Font. Cette seule requête rassemblera toutes les données de police de Google et les stockera localement sur votre serveur.
5 plugins de polices WordPress à découvrir
Examinons maintenant quelques plugins de polices WordPress populaires. Ceux-ci fonctionnent particulièrement bien lorsque votre thème ne vous permet pas de modifier la police.
Easy Google Fonts est un plugin de polices simple mais puissant qui facilite l’intégration de polices Google personnalisées sans écrire de code. Il s’intègre parfaitement au personnalisateur WordPress intégré, vous permettant de prévisualiser les modifications sur votre site en temps réel.
De plus, Easy Google Fonts vous permet de créer des contrôles de police personnalisés pour d’autres éléments de votre site WordPress.
Fonts Plugin vous permet non seulement d’utiliser facilement n’importe quelle police Google sur votre site WordPress, mais il vous aide également à personnaliser et à modifier la police de chaque élément de votre site. Avec une fonction de prévisualisation en direct, vous pouvez apporter vos modifications et les prévisualiser en temps réel.
Custom Fonts est un plugin de polices populaire développé
À l’aide des polices personnalisées, vous pouvez facilement intégrer des fichiers de polices personnalisées, tels que EOT, SVG, TTF, WOFF, WOFF2 et OTF,
Le plugin WP Google Fonts est un plugin de polices populaire qui facilite l’ajout de polices gratuites et de haute qualité de Google à votre site WordPress. Vous pouvez ajouter le code Google requis et attribuer des polices Google à des éléments CSS spécifiques.
Custom Adobe Fonts est un autre plugin de polices populaire de l’équipe Brainstorm Force. Si vous avez toujours voulu intégrer facilement des polices Adobe à votre site Web WordPress, c’est le plugin que vous devez utiliser. Le plugin fonctionne avec le thème Astra et vous permet d’écrire du CSS personnalisé.
5 Conseils pour choisir une police pour votre site Web
La lisibilité est cruciale lorsqu’il s’agit d’engager les visiteurs d’un site Web. D’une part, une bonne typographie peut faciliter la lecture, d’autre part, elle peut complètement décourager les utilisateurs si vous utilisez une mauvaise typographie.
Alors, que devez-vous prendre en compte lors du choix d’une police pour votre site Web ?
1. Utiliser des polices standards
Il existe plusieurs milliers de polices intéressantes que vous pouvez utiliser. Certaines polices peuvent donner à vos créations un tout nouveau look, tandis que d’autres peuvent être un peu inattendues.
Bien que ces polices intéressantes puissent donner à votre conception l’avantage créatif que vous recherchez, elles peuvent distraire les utilisateurs de votre site Web. Maintenant, vous ne voudriez pas que vos lecteurs passent du temps à s’interroger sur la police au lieu de lire réellement le texte, n’est-ce pas ?
À moins que votre conception n’exige l’utilisation de telles polices, vous devez vous en tenir aux polices standard
2. Choisissez une police qui fonctionne bien
Étant donné que les utilisateurs accéderont à votre site à partir de différents appareils et tailles d’écran, vous devrez choisir une police au pixel près pour toutes les résolutions d’écran. Qu’il s’agisse du texte, des en-têtes ou de tout autre texte, votre police doit bien fonctionner quelles que soient les tailles et les épaisseurs.
3. Choisissez une police avec des lettres claires et reconnaissables
Avez-vous été confondu avec des formes de lettres similaires ? Peut-être avez-vous confondu un I avec un L ou un T avec un J ? Sélectionnez une police claire et qui ne finit pas
4. Évitez les majuscules
Lorsqu’il s’agit de mettre en évidence une partie de votre texte ou même des acronymes, la mise en majuscule de votre texte fonctionne très bien. Cependant, cela ne donne pas de bons résultats en termes de lisibilité si le texte entier est en majuscule.
5. Réduire le nombre de polices
Enfin, minimisez le nombre de polices utilisées sur une seule page. L’utilisation de plusieurs polices donne à un site un aspect non professionnel. Sans oublier que cela donne à votre site un aspect non structuré. Même si deux est un bon nombre, nous aimons nous en tenir à une seule police et utiliser différentes variantes sur nos sites Web.
FAQ sur les polices WordPress
Commentpuis-je changer la police de mon thème WordPress ?
Il existe plusieurs façons de modifier les polices de votre thème WordPress. Le plus simple est d’accéder à la typographie du thème via le personnalisateur WordPress. Bien que cela varie en fonction de votre thème, si vous utilisez Astra, rendez-vous sur Apparence > Personnalisez > Global > Typographie et modifiez les polices.
Vous pouvez également utiliser un générateur de pages, un plugin, modifier le CSS et plusieurs autres méthodes mentionnées
Comment puis-je changer la police de mon en-tête
Vous pouvez modifier la police de votre en-tête via le personnalisateur WordPress. Si vous utilisez le thème Astra, vous trouverez le Header Builder sous Apparence > Personnaliser. Non seulement vous pouvez concevoir votre en-tête comme vous le souhaitez, mais vous pouvez également modifier la police de chaque élément de votre en-tête.
Quelle est la police
La police
Quelles polices puis-je utiliser
Vous pouvez utiliser toutes sortes de polices
Comment prévisualiser une police
Grâce au personnalisateur WordPress, vous pouvez prévisualiser vos polices en temps réel. Grâce à l’aperçu en direct, vous voyez exactement à quoi ressemble votre texte lorsque vous continuez à faire défiler les différentes polices. Une fois que vous êtes satisfait d’une police particulière, vous pouvez publier ces modifications sur le site en direct.
Comment modifier les polices
Les polices jouent un rôle essentiel
La bonne nouvelle est que WordPress facilite la modification de la police et la personnalisation en fonction des exigences de votre site Web. De l’utilisation du personnalisateur WordPress à l’installation de plugins et à l’utilisation du générateur de pages, nous avons couvert plusieurs façons de modifier les polices
