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.
Une fois que vous êtes dans l’éditeur de site, cherchez l’ icône Styles en haut à droite de l’écran.
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.
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.
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.
Certains thèmes ont plusieurs polices disponibles par défaut.
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.
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 :
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.
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 :
Faites ensuite défiler la page jusqu’en bas et téléchargez le paquet de polices sélectionné.
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 :
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.
