Comment changer la police dans WordPress

Vous souhaitez personnaliser votre site et peaufiner la typographie ? Dans cet article, nous allons vous montrer comment changer la police dans WordPress pour donner à votre site un aspect professionnel et élégant.

La typographie du site Web est importante. Non seulement cela donne à votre site un certain style, mais cela peut également faire ou défaire l'expérience utilisateur. Si votre police n'est pas conviviale, les visiteurs sont plus susceptibles de quitter votre site.

La typographie que vous utilisez doit correspondre à ce que vous essayez de communiquer avec votre site. Votre site vend-il des services de conseil ou s'agit-il d'un site Web de photographie ? Comme vous pouvez l'imaginer, les thèmes et les polices que ces deux sites Web utiliseront sont assez différents.

Vous pouvez voir plusieurs polices gratuites à utiliser dans la bibliothèque Google Fonts. Si vous recherchez des polices premium comme Proxima-Nova, vous devez consulter Typekit d'Adobe. Les deux bibliothèques de polices sont livrées avec de nombreuses polices conviviales qui conviendront à votre entreprise.

Comment changer la police dans WordPress

Il existe plusieurs méthodes pour changer la police dans WordPress :

1. Options par défaut de WordPress (Gutenberg/Éditeur classique)
2. Manuellement avec CSS
3. Utiliser un plugin dédié
4. Hébergement de votre propre police
5. Intégration de polices Web

Dans ce guide, nous vous montrerons chaque méthode étape par étape afin que vous puissiez choisir la meilleure pour votre site.

1) Options par défaut de WordPress

Par défaut, WordPress propose deux options pour personnaliser la typographie : avec Gutenberg ou en utilisant l'éditeur Classic.

1.1) Avec Gutenberg

La dernière version de WordPress est livrée avec un tout nouvel éditeur : l'éditeur Gutenberg. C'est un outil avancé qui vient avec plusieurs blocs et qui est très facile à utiliser.

Pour changer la police, ouvrez un article ou une page et sélectionnez le texte que vous souhaitez modifier.

Sur le côté droit, vous verrez les options de typographie.

Là, vous verrez plusieurs options pour changer la taille de la police :

• Défaut
• Petit
• Moyen
• Grande
• Énorme
• Personnalisé

Vous pouvez choisir l'une de ces tailles prédéfinies ou en ajouter une personnalisée. Par exemple, si nous sélectionnons 20px comme taille de police, nous verrons les changements dans l'éditeur.

De cette façon, vous pouvez facilement modifier vos blocs et leur attribuer une taille de police personnalisée.

1.2) Utilisation de l'éditeur classique

Si vous préférez gérer votre typographie via l'éditeur classique, vous devez installer et activer le plugin Advanced Editor Tools (TinyMCE Advanced).

Une fois que vous avez activé le plugin, ouvrez votre éditeur de contenu et vous remarquerez plusieurs outils supplémentaires.

Dans la liste déroulante, vous pouvez modifier le type et la taille de la police. Vous pouvez choisir parmi plusieurs polices et tailles Google pour personnaliser votre site.

Avec ces options, vous pouvez sélectionner n'importe quel paragraphe et choisir n'importe quelle police et taille dans la liste déroulante.

2) Manuellement avec un code CSS personnalisé

Une autre façon de changer votre police dans WordPress consiste à utiliser un code CSS personnalisé. Par défaut, les thèmes sont livrés avec une certaine taille de police qui s'applique à l'ensemble du site. Cependant, vous souhaiterez parfois les personnaliser pour donner à votre site un style différent.

Pour cela, dans un premier temps, dans votre tableau de bord WordPress allez dans Apparence > Personnaliser > CSS supplémentaire . Dans cette section, vous pouvez ajouter du code personnalisé et modifier votre site.

Changer la police du corps

Par exemple, pour modifier la taille de la police de votre corps à l'échelle du site à 16 px, vous devez utiliser ce code CSS :

 body { font-size : 16px; }

Changer la police des paragraphes

De même, si vous cherchez un moyen d'ajuster la taille de la police des paragraphes à 16 px, vous devez utiliser ce code CSS :

p {
font-size : 16px;
}

Personnaliser la police des en-têtes

En plus de cela, si vous avez besoin de modifier la taille de police de vos en-têtes, vous pouvez utiliser le code ci-dessous :

.entry-content h2 {
font-size : 36px;
}

.entry-content h3 {
font-size : 30px;
}

.entry-content h4 {
font-size : 26px;
}

.entry-content h5 {
font-size : 22px;
}

.entry-content h6 {
font-size : 20px;
}

Ce ne sont que des exemples, alors assurez-vous d'ajuster la taille de la police en fonction de vos besoins. Comme nous utilisons le personnalisateur pour effectuer ces modifications, vous pouvez voir les modifications en direct sur le côté droit.

Une fois que vous êtes satisfait des personnalisations, enregistrez les modifications et appuyez sur Publier .

Changer la famille de polices

De plus, pour modifier la famille de polices à l'échelle du site, vous pouvez utiliser ce code :

 * {font-family:"Verdana", Verdana, sans-serif}

L'astérisque (*) appliquera la modification à l'ensemble du site. Par conséquent, si vous souhaitez uniquement appliquer les modifications à certaines pages ou publications, supprimez-les du code. Pour plus d'informations sur les polices CSS, consultez ce site.

En plus de cela, vous pouvez également modifier le style de police. Par exemple, si vous voulez mettre les titres 2 et 3 en italique, utilisez ce code :

 h2, h3 { font-style : italics ; }

Si vous souhaitez appliquer des modifications similaires à votre thème, vous pouvez écrire votre code directement sur le fichier style.css de votre thème enfant. Gardez à l'esprit que cela appliquera les modifications à l'ensemble du site, alors assurez-vous de créer une sauvegarde complète de votre site avant de continuer.

3) Avec un plugin

Vous pouvez également changer la police dans WordPress avec un plugin dédié. Dans cette section, nous allons vous montrer comment intégrer Google Fonts à votre site. La première chose que vous devez faire est d'installer et d'activer le plugin Easy Google Fonts.

Après cela, vous pouvez modifier la police de votre site Web. Allez dans Apparence > Personnaliser et depuis le Customizer , vous pourrez prendre le contrôle de la typographie de votre site web. Sur le côté gauche, vous verrez une nouvelle option de personnalisation appelée Typographie .

Sélectionnez-le et vous verrez un écran avec plusieurs options pour changer toute la typographie des paragraphes et des titres.

Supposons que vous souhaitiez modifier la police de votre paragraphe, ouvrez donc l'option Modifier la police .

À partir de là, vous pouvez modifier :

• Script/Sous-ensemble
• Famille de polices
• Poids de la police
• Décoration de texte
• Transformation de texte

Si vous devez modifier l'apparence de votre police, accédez à l'onglet suivant où vous pouvez modifier :

• Couleur de la police
• Couleur de l'arrière plan
• Taille de police
• Hauteur de la ligne
• L'espacement des lettres

Enfin, depuis l'onglet Positionnement, vous pouvez personnaliser :

• Marge
• Rembourrage
• Frontière
• Rayon de bordure
• Affichage

Changer la police

Ces options de personnalisation sont idéales pour faire passer votre typographie au niveau supérieur. Par exemple, supposons que vous souhaitiez modifier la famille de polices sur votre site WordPress. Dans l'onglet Styles , choisissez la police que vous souhaitez utiliser.

Si vous avez une famille de polices spécifique en tête, vous pouvez utiliser la fonction de recherche. Pour cette démo, nous utiliserons la police Work Sans.

Étant donné que nous utilisons WordPress Customizer pour effectuer ces modifications, chaque mise à jour sera visible dans l'aperçu en direct. Par exemple, lorsque nous changeons la police de thème par défaut en Work Sans, nous pouvons voir les changements en temps réel.

De même, vous pouvez également modifier le poids de la police, la décoration du texte et la transformation, ainsi que vos en-têtes.

Une fois que vous avez terminé avec la personnalisation de la police du paragraphe, passez aux options de police du titre 1. Vous pouvez choisir n'importe quel titre dans la liste, mais pour ce didacticiel, nous nous concentrerons sur le titre 1.

Comme nous l'avons fait auparavant, nous allons changer la famille de polices. Dans ce cas, nous sélectionnerons Roboto Slab.

En suivant cette méthode simple, vous pouvez modifier les polices de paragraphe et d'en-tête. Comme ce plugin est livré avec la plupart des polices Google intégrées, vous avez le choix entre de nombreuses options. De plus, les options de personnalisation du style sont extrêmement faciles à utiliser, ce qui rend l'ensemble du processus accessible à chaque utilisateur.

4) Héberger votre propre police

Si vous avez des polices personnalisées sur votre ordinateur local, vous pouvez les héberger sur votre serveur Web. Dans cette section, nous vous montrerons comment vous pouvez héberger votre propre police et modifier votre typographie dans WordPress.

Pour ce faire, vous devrez accéder au gestionnaire de fichiers de votre serveur Web pour créer des dossiers personnalisés et télécharger les polices. Si vous utilisez l'une des sociétés d'hébergement WordPress les plus populaires, vous avez probablement accès à un cPanel facile à utiliser. Alternativement, si vous utilisez un service d'hébergement géré comme Kinsta ou WP Engine, vous devrez utiliser un client FTP tel que FileZilla ou un plugin de gestionnaire de fichiers dédié.

Pour cette démo, nous utiliserons un environnement de staging, donc changer les fichiers de base et télécharger des fichiers personnalisés sera assez facile.

Avant de télécharger vos polices directement dans votre dossier de thème, pour faciliter la gestion, vous devez créer un nouveau dossier appelé fonts . Ensuite, vous pouvez télécharger toutes vos polices personnalisées dans ce dossier pour un accès facile.

Une fois que vous avez créé le dossier, ouvrez-le. C'est ici que vous allez télécharger vos fichiers de polices personnalisées.

Maintenant, vous devez trouver les polices que vous prévoyez d'utiliser. Pour cette démonstration, nous utiliserons Lato, un fichier de police de Google Fonts, mais vous pouvez choisir la police de votre choix.

Une fois que vous avez sélectionné une police, vous serez redirigé vers sa page dédiée et vous y verrez un bouton Télécharger la famille .

Après avoir appuyé sur ce bouton, la famille de polices sera téléchargée sur votre ordinateur sous forme de fichier .zip . Décompressez-le et téléchargez les fichiers dans votre dossier de polices .

C'est la première étape. Voyons maintenant comment aller plus loin et intégrer votre police à votre thème.

Intégrez votre police avec CSS

Maintenant, vous pouvez commencer à intégrer cette police à votre thème avec un peu de CSS personnalisé. Ouvrez WordPress Customizer , accédez à la section CSS supplémentaire et copiez le code CSS ci-dessous.

 @font-face { font-family : 'Lato' ; src : url ( “fonts/Lato-Medium.ttf” ) format ( 'woff' ) ; /* medium */ font-weight : normal ; font-style : normal ; } @font-face { font-family : 'Lato' ; src : url ( “fonts/Lato-Bold.ttf” ) format ( 'woff' ) ; /* medium */ font-weight : bold ; font-style : normal ; }

Si vous regardez le code CSS, vous verrez qu'il mentionne trois choses principales.

• La famille de polices
• URL source
• Poids de la police

Lorsque vous collez ce code CSS dans votre Customizer, vous devrez mettre à jour certaines sections en fonction de la police que vous avez choisie. Tout d'abord, vous devez mettre à jour la famille de polices. Dans notre code, Lato est la famille de polices, vous devez donc la remplacer par la police de votre choix. Vous pouvez trouver la famille de polices dans l'en-tête.

Après cela, vous devez ajuster le chemin d'accès à la police. Si vous avez suivi les étapes décrites ci-dessus, vous avez téléchargé les fichiers de police dans un dossier appelé fonts . Alors changez simplement la ligne src : url ( “fonts/Lato-Bold.ttf” avec fonts/your-font-name.ttf , et vous êtes prêt à partir.

De plus, vous pouvez modifier le poids de la police en fonction de vos besoins. Si vous utilisez la police pour les paragraphes, une épaisseur de police normale fera l'affaire, mais vous pouvez également modifier les valeurs.

En plus de cela, vous pouvez changer la police de votre titre avec le code CSS suivant :

 h1 { font-family : 'Lato' , Georgia , serif ; }

Et si vous voulez changer la police de vos paragraphes, utilisez ce code CSS :

p {
font-family : 'Lato' , Georgia , serif ;

}

D'un autre côté, si vous avez besoin de changer la police de tout votre site Web, utilisez ce code CSS :

body {
font-family : 'Lato' , Georgia , serif ;

}

De cette façon, vous pouvez facilement changer la police dans WordPress. Comme vous pouvez le constater, il s'agit d'une méthode conviviale pour les débutants, facile à appliquer, quelles que soient vos connaissances en codage.

5) Intégration de polices Web

L'intégration de polices Web est un autre moyen simple de personnaliser la police dans WordPress. Au lieu d'héberger les polices sur notre serveur, nous appellerons des polices tierces via un lien unique, servant la police. L'avantage de l'intégration des polices Web est que vous n'avez pas besoin d'héberger manuellement des polices et de vous fier à un logiciel FTP.

Pour l'intégration de la police Web, accédez d'abord à Google Fonts et sélectionnez une police et un style que vous aimez.

Sur votre droite, vous verrez un code pour intégrer la police. Copiez-le.

Dans notre cas, le code de la police est :

 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2? family= Spartan & display=swap" rel="stylesheet">

Ensuite, vous devez éditer le fichier functions.php de vos thèmes pour appeler la police. Mais avant cela, vous devrez ajuster le code. Tout ce dont vous avez besoin est l'URL de la famille de polices qui, dans notre cas, est :

https://fonts.googleapis.com/css2 ? famille = spartiate

Une fois que vous avez obtenu l'URL, ouvrez le fichier functions.php de votre thème. Vous pouvez soit utiliser un thème enfant, soit un plugin pour modifier les fichiers de base du thème. Ensuite, collez le code suivant.

 function quadlayers_add_google_fonts ( ) { wp_register_style ( 'googleFonts' , 'https://fonts.googleapis.com/css2?family=Spartan' ) ; wp_enqueue_style ( 'googleFonts' ) ; } add_action ( 'wp_enqueue_scripts' , 'quadlayers_add_google_fonts' ) ;

REMARQUE : Assurez-vous de changer l'URL avec la police que vous avez choisie.

Après avoir mis à jour le fichier, vous aurez intégré avec succès la police à votre site Web. Maintenant, vous pouvez utiliser le code CSS pour spécifier la police. Comme nous l'avons fait précédemment, pour changer la police du corps, vous pouvez utiliser ce code :

body {
font-family : 'Spartan' , Georgia , serif ;

}

Après cela, mettez à jour la famille de polices en fonction de votre police Google et vous avez terminé.

Nous avons vu différentes méthodes pour changer la police dans WordPress. Mais ce n'est pas tout. Vous pouvez également aller plus loin et personnaliser encore plus les polices.

Comment ajouter des polices personnalisées à WordPress

Changer les polices est un bon début, mais si vous souhaitez vous démarquer de vos concurrents et créer un site Web unique, vous pouvez ajouter des polices personnalisées à votre site. Il existe quatre façons d'intégrer Google Fonts à une installation WordPress.

• Avec un plugin de police dédié
• Modification du fichier functions.php
• Modification du fichier header.php
• Via le fichier style.css

Pour plus d'informations sur la façon d'ajouter des polices personnalisées à votre site en utilisant chacune de ces méthodes, consultez notre guide complet.

Bonus : comment changer la police du thème dans certaines zones

Au lieu de changer la police à l'échelle du site, vous pouvez appliquer les modifications à certaines zones. Pour ce faire, cliquez avec le bouton droit sur la page dont vous souhaitez modifier la police et sélectionnez Inspecter .

Cela ouvrira une nouvelle console sur votre droite.

Vous pouvez passer votre souris sur les éléments pour voir la valeur CSS exacte de chacun.

Dans ce cas, nous allons changer la police du titre (h1), donc la classe CSS est entry-title .

Ensuite, dans votre tableau de bord WordPress, accédez à Apparence > Personnaliser > CSS supplémentaire et collez le code CSS suivant pour modifier la police du titre du message.

REMARQUE : La police que vous souhaitez utiliser doit déjà être intégrée à votre site.

 .entry-title { font-family: 'Lato', Georgia, serif; }

Ajustez simplement le code avec la police que vous souhaitez utiliser sur votre site Web.

C'est ça! De cette façon, vous pouvez facilement changer la police dans certaines zones. Assurez-vous d'utiliser la bonne classe CSS pour cela, sinon cela ne fonctionnera pas.

Comment changer les couleurs de police

Outre la modification des polices, vous pouvez également modifier les couleurs de police pour créer un site unique et offrir aux visiteurs une meilleure expérience utilisateur. La bonne nouvelle est que vous pouvez y parvenir sans utiliser de plugins.

Voyons comment vous pouvez modifier les couleurs de police de votre site à l'aide d'un simple code CSS.

Disons que vous avez une page avec plusieurs titres comme celui-ci :

Pour changer la couleur des titres, vous devez d'abord trouver la classe CSS appropriée. Par exemple, pour modifier la couleur de la police h2, vous devez trouver sa classe en faisant un clic droit dessus et en appuyant sur Inspect .

Dans ce cas, la classe CSS est .entry-content h2 .

Après cela, ouvrez le WordPress Customizer, allez dans la section CSS supplémentaire et collez le code CSS suivant :

 .entry-content h2 { color : #f542f5 ; }

Comme vous pouvez le voir, la couleur de la rubrique 2 passe au rouge.

De cette façon, vous pouvez également modifier toutes vos rubriques. Tout ce que vous avez à faire est de remplacer h2 par votre balise de titre préférée.

Sinon, si vous souhaitez modifier la police de votre paragraphe, utilisez ce code CSS :

 .entry-content p { color : blue ; }

Utilisez le code comme base et choisissez les couleurs que vous souhaitez pour chaque section de votre site.

C'est ça! C'est ainsi que vous pouvez facilement changer les couleurs de la police.

Comment identifier les polices à partir de sites Web et d'images

Une autre option intéressante lorsque vous naviguez sur le Web est de pouvoir identifier les polices des sites Web et des images.

Il existe différentes façons de savoir quelle typographie un site utilise. Le moyen le plus simple consiste à utiliser l'outil d'inspection du navigateur. Une fois que vous avez trouvé une police que vous aimez, cliquez simplement avec le bouton droit sur le texte qui contient la police et accédez à Inspecter (dans certains navigateurs, vous devrez peut-être accéder à Web Developer > Developer Tool ). Vous verrez que l'élément sera mis en surbrillance et vous pourrez voir les styles et les mises en page sur l'inspecteur.

Après cela, allez dans l'onglet Calculé et trouvez le champ Font-Family où vous verrez la police du site Web.

De plus, vous pouvez identifier les polices à partir d'images à l'aide d'un outil appelé WhatTheFont. Pour plus d'informations sur la façon d'obtenir des informations sur les polices à partir de sites Web et d'images, nous vous recommandons de consulter notre guide sur la façon d'identifier les polices.

Conclusion

Dans l'ensemble, en personnalisant la typographie de votre site, vous pouvez donner à votre site un style différent et améliorer l'expérience utilisateur sur votre site pour vous démarquer de vos concurrents.

Dans ce guide, nous avons vu différentes méthodes pour changer la police dans WordPress :

• Éditeur par défaut (Gutenberg et éditeur classique)
• Code CSS personnalisé
• Avec un plugin
• Hébergement de votre propre police
• Intégration de polices Web

La méthode la plus simple de la liste consiste à utiliser Gutenberg ou Classic Editor. Il vous permet de modifier les polices en quelques clics et de voir les changements en temps réel. Alternativement, si vous souhaitez personnaliser la taille, le style et la couleur de la police, vous pouvez utiliser le code CSS.

Une autre excellente solution consiste à utiliser un plugin dédié. Sans écrire de code, vous pouvez modifier la police de votre site Web via le personnalisateur et prendre le contrôle total de la typographie de votre site.

L'hébergement de vos propres polices Web est également une bonne option si vous disposez des fichiers de police. Si vous préférez ne pas héberger les polices sur votre serveur, en revanche, l'intégration de polices Web est un moyen simple de personnaliser vos polices. Le principal avantage de cette méthode est que vous devez héberger les polices ou vous fier à un logiciel FTP. Cependant, gardez à l'esprit que l'appel de polices Web peut augmenter les requêtes HTTP sur votre site, vous devrez donc optimiser les requêtes pour éviter les problèmes de performances et de vitesse.

Nous espérons que vous avez apprécié ce guide et que vous l'avez trouvé utile. Si vous l'avez fait, merci de le partager sur les réseaux sociaux. Pour plus de tutoriels et de guides, consultez notre blog.

Quelle méthode avez-vous utilisée pour changer les polices de votre site ? Connaissez-vous d'autres méthodes que nous devrions ajouter ? Faites-nous savoir dans la section commentaires ci-dessous!