Home » WordPress » Comment modifier ou ajouter une police dans les derniers thèmes WordPress (y compris Google Fonts)

Comment modifier ou ajouter une police dans les derniers thèmes WordPress (y compris Google Fonts)

Si vous commencez tout juste à utiliser WordPress, ou si vous n’avez jamais utilisé de thèmes Full Site Editor (FSE) auparavant, vous risquez d’être submergé par le nombre de modèles, de motifs et de paramètres que vous pouvez contrôler. Et il y a de fortes chances que vous ne remarquiez pas que les thèmes FSE disposent d’un grand nombre de paramètres de couleurs et de polices disponibles dès le départ.

Ce qui est bien, c’est que les paramètres de style les plus utilisés sont bien organisés, et vous pourrez les trouver tous dans un seul panneau. Voyons maintenant à quoi ressemblent les paramètres de police dans WordPress.

Comment modifier les polices dans WordPress

Pour accéder aux paramètres de police dans les thèmes de WordPress Full Site Editor, vous devez ouvrir l’éditeur de site. Vous pouvez le faire en allant dans Apparence >> Éditeur dans le panneau d’administration de WordPress, ou en cliquant sur Éditer le site lorsque vous naviguez sur votre site web en tant que visiteur.

how to change font in wordpress

Best WordPress hosting 2024

Une fois que vous êtes dans l’éditeur de site, cherchez l’ icône Styles en haut à droite de l’écran.

how to change wordpress typography

Après avoir cliqué sur Styles, vous verrez tous les paramètres de style global disponibles pour votre thème actuel. Cliquez sur Typographie pour vérifier les paramètres de police.

how to update wordpress fonts

Les thèmes WordPress par défaut vous permettent de définir différentes polices pour le texte, les liens, les titres et les boutons. Cliquez sur chacun d’entre eux pour modifier leurs paramètres par défaut.

Un petit rappel : si vous en avez besoin, vous pouvez remplacer ces paramètres dans n’importe quel bloc lorsque vous modifiez des pages ou des articles. Et ne vous inquiétez pas de modifier les paramètres globaux si vous avez des paramètres de police personnalisés dans des articles déjà existants. Les paramètres globaux ne réinitialiseront pas vos polices personnalisées.

wordpress how to change font

Lorsque vous sélectionnez l’un des éléments de la section Typographie, vous pouvez modifier la famille de polices, la taille des caractères, l’apparence (gras, italique, etc.) et la hauteur de ligne.

wordpress how to change font family

Certains thèmes ont plusieurs polices disponibles par défaut.

wordpress changing font family

Une fois que vous aurez modifié la police dans les paramètres de typographie, vous verrez le résultat immédiatement. Le côté gauche de l’éditeur de site met à jour ses polices et tous les autres paramètres que vous y modifiez, avant même d’enregistrer les modifications.

change wordpress font

Une fois que vous aurez cliqué sur le bouton  » Enregistrer », les paramètres de la police du site seront mis à jour.

Comment ajouter une police à l’éditeur complet du site WordPress

Les anciennes méthodes d’ajout de polices directement dans le fichier style.css du thème, ou par l’ajout de CSS personnalisés, fonctionneront pour les visiteurs du site, mais vous ne serez pas en mesure de prévisualiser les pages avec la bonne police depuis l’administration. Ce n’est donc pas la bonne solution pour les thèmes basés sur FSE.

La bonne nouvelle est que WordPress vous permet d’ajouter facilement des polices aux paramètres du thème. Pour ce faire, cliquez sur Tools >> Theme File Editor dans le menu d’administration de WordPress. Cliquez ensuite sur le fichier theme.json sur la droite, et vérifiez les FontFamilies dans le code du fichier.

Vous avez probablement déjà remarqué comment différentes polices sont définies dans le thème. Pour ajouter une police supplémentaire au thème WordPress, vous devez ajouter des fontFace supplémentaires à ces paramètres.

Voici un exemple de comment ajouter la police Georgia à un thème basé sur Full Site Editor :

{
    "fontFamily": "Georgia",
	"name": "Georgia",
	"slug": "georgia"
},

C’est ici que vous devez ajouter le code :

how to add additional fonts to full site editor in wordpress

Une fois que vous aurez ajouté la police, elle pourra être utilisée à la fois dans les paramètres de style principaux et dans les paramètres des blocs personnalisés. Elle sera également prévisualisée lorsque vous modifierez le contenu de votre site.

how to add fonts to wordpress

Comment ajouter une police Google avec quelques graisses à WordPress Full Site Editor

Vous voulez ajouter quelques poids différents de la police Google à l’éditeur complet de WordPress ? Vous pouvez le faire dans le même Tools >> Theme File Editor, en ajoutant une famille de polices avec un peu plus de détails.

Mais avant d’ajouter une police Google spécifique à WordPress, vous devez télécharger les fichiers de cette police. Vous pouvez utiliser l’outil d’aide Google Webfonts pour cela. Voici l’exemple de la police Monsterrat. Commencez par sélectionner les poids et les styles de police dont vous avez besoin :

how to download google font to your computer

Faites ensuite défiler la page jusqu’en bas et téléchargez le paquet de polices sélectionné.

download google fonts to use in wordpress theme

Extrayez les polices téléchargées, et téléchargez-les dans le dossier /fonts de votre thème WordPress en utilisant Filezilla ou un autre client FTP similaire.

Une fois que les fichiers sont en place, vous devez ajouter cette famille de polices Google au fichier theme.json via Tools >> Theme File Editor.

Voici un exemple que j’ai utilisé dans le thème Frost pour ajouter plusieurs poids de la police Google dans WordPress. Vous pouvez l’ajouter juste après « fontFamilies » : [ ligne :

{
					"fontFace": [
						{
							"fontFamily": "Montserrat",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "400",
							"src": [
								"file:./assets/fonts/montserrat-v25-latin-ext_latin-regular.woff2"
							]
						},
						{
							"fontFamily": "Montserrat",
							"fontStretch": "normal",
							"fontStyle": "italic",
							"fontWeight": "400",
							"src": [
								"file:./assets/fonts/montserrat-v25-latin-ext_latin-italic.woff2"
							]
						},
						{
							"fontFamily": "Montserrat",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "500",
							"src": [
								"file:./assets/fonts/montserrat-v25-latin-ext_latin-500.woff2.woff2"
							]
						},
						{
							"fontFamily": "Montserrat",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "600",
							"src": [
								"file:./assets/fonts/montserrat-v25-latin-ext_latin-600.woff2.woff2"
							]
						},
						{
							"fontFamily": "Montserrat",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "700",
							"src": [
								"file:./assets/fonts/montserrat-v25-latin-ext_latin-700.woff2.woff2"
							]
						}
					],
					"fontFamily": ""Montserrat", sans-serif",
					"name": "Montserrat",
					"slug": "montserrat"
				},

Voici la capture d’écran :

how to add multiple weights of Google font in Full Site Editor theme's theme.json file in wordpress

C’est tout, vous devriez être en mesure d’utiliser la police Google Font dans WordPress maintenant, et voir comment elle se présente directement dans l’éditeur de WordPress.

Si vous cherchez une implémentation plus simple des Google Fonts dans WordPress (sans les prévisualiser dans l’éditeur), vous pouvez consulter mon autre article comment ajouter des polices Google en local à WordPress.

Tags:

Fathom analytics - privacy focused cookie-free website analytics

Most popular tutorials


Get our latest WordPress news and special offers from RockSolidWP!

Only useful WordPress and WooCommerce tips and tricks and exclusive offers for our readers once a month. No marketing nonsense.

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK