Comment changer la police de caractères WordPress

Changer la police de caractères WordPress est sans doute l’une des premières actions que l’on souhaite faire sur son site web. WordPress va intégrer Google fonts dans son interface, mais en attendant, selon l’intégration utilisée, nous sommes obligés d’héberger localement les polices de caractères. Dans cet article, je vous présente les différentes manières de personnaliser votre police d’écriture.

Les différentes polices d’écriture de WordPress

Dans la version 6.5, WordPress va intégrer directement les polices Google fonts et l’intégration de polices. Pour le moment, il ne propose que quelques polices de base pour personnaliser votre typographie:

• Police par défaut
• DM sans
• IBM plex mono
• Inter
• Police système
• Source sérif pro
• Bayon

Cependant en attendant, vous pouvez utiliser cette extension pour utiliser les polices de Google sur votre site ou utiliser la méthode qui va suivre. L’avantage, c’est qu’au lieu de télécharger toutes les polices, vous pourrez installer uniquement celle que vous utilisez. Sans devoir installer d’extension. De ce fait, votre code WordPress s’allège.

Comment changer de police d’écriture dans WordPress ?

Commençons par la méthode la plus simple dans ce tutoriel. Il est possible de changer la police directement dans WordPress. La méthode peut-être légèrement différente selon le thème que vous utilisez. Certains thèmes, comme Bloksy par exemple, intègrent les polices Google fonts, d’autres non. Aussi la quantité de police que vous allez avoir à votre disposition dépend en grande partie du thème que vous allez installer.

Modifier la police du thème WordPress

• Rendez-vous sur l’onglet Apparence de votre menu d’administration
• Cliquez sur Personnaliser
• Choisissez l’onglet typographie
• Sélectionnez vos différentes polices
• Enregistrez et publiez

Vous pouvez définir les balises HTML qui vont être impactées par cette nouvelle typo mais aussi la taille et le style de la police par exemple italique, gras, normal, extragras, etc.

Changer la police de caractères WordPress sur un thème FSE WordPress

Pour modifier la typographie dans un thème Full Site Editing (édition complète du site) procédez comme suite :

• Rendez-vous sur l’onglet « Apparence » de votre menu d’administration
• Cliquez sur « éditeur »
• Cliquer sur la page
• Sélectionner le rond noir et blanc en haut à droite nommé « styles »
• Cliquez sur « typographie »

Vous pouvez maintenant gérer le réglage de la typographie des différents éléments de WordPress notamment les titres, les liens, le texte, les légendes et les boutons.

Comment ajouter une police originale sur WordPress ?

Si votre thème ne propose pas de télécharger des polices de caractères, vous pouvez les intégrer à WordPress en utilisant du code CSS. Pour ça vous devez la télécharger sur votre serveur afin d’être conforme avec le RGPD. Cette méthode fonctionne avec une police Google font ou une police originale que vous allez télécharger. Pour cet exemple je vais prendre une police Google, mais cette méthode est surtout utile pour intégrer une police originale à WordPress. Ça se passe en 4 étapes :

1. Télécharger une police de caractères
2. Convertir le format de fichier TTF au format Woff
3. Ajouter la police de caractère sur son serveur
4. Ajouter du code CSS pour les balises HTML afin d’utiliser la police d’écriture

Voyons ça ensemble.

Télécharger une police de caractères

Suivez ces étapes simples pour ajouter une police Google :

• rendez-vous sur le site Google Fonts ou le site de votre choix.
• Utilisez les filtres pour sélectionner votre police de caractères
• Cliquez sur la police de votre choix
• Cliquez ensuite sur le bouton ‘Download Family’ situé en haut à droite sur Google Font.

Si vous voulez télécharger une police originale, voici quelques sites utiles.

• dafontfree.io
• creativefabrica.com

Vous devez décompresser le fichier pour accéder à la typographie. Selon le nombre de styles disponibles, vous aurez plus ou moins de fichiers.

Convertir le format de fichier TTF au format WOFF

Les fichiers que vous avez téléchargés sont en général au format TTF. Nous allons utiliser le format WOFF pour un meilleur affichage. Tapez simplement ‘TTF to WOFF’ sur Google pour convertir vos fichiers. Dans cet exemple j’utilise Convertio.

Ajouter la police de caractère sur son serveur

Nous allons devoir créer un dossier sur le serveur Web. Vous pouvez directement accéder aux fichiers de votre site Internet en passant par votre hébergeur web ou utiliser Filezilla. C’est cette méthode que je vais utiliser.

Assurez-vous d’être à la racine de votre site

Avant de créer le dossier, vous devez vous assurer que vous êtes bien à la racine de votre site. C’est-à-dire là où est installé WordPress. Pour vous repérer, il doit y avoir le dossier ‘wp-content’, ‘wp-admin’ et ‘wp-includes’. Votre nouveau dossier ‘fonts’ doit donc se trouver à côté de ces dossiers existants.

Créez un nouveau dossier ‘fonts’

Connectez-vous à votre site en utilisant Filezilla puis créez un nouveau dossier nommé ‘fonts’ en faisant un clic droit puis ‘nouveau dossier’ sur la fenêtre du bas.

Ajouter vos polices d’écriture dans le dossier

Pour terminer la partie côté serveur, il ne vous reste plus qu’a faire un glisser-déposer de vos différentes polices au format ‘WOFF’ dans votre dossier ‘fonts’. Vous pouvez créer des dossiers pour organiser les styles de polices si vous en avez beaucoup.

Ajouter du code CSS pour les balises HTML afin d’utiliser la police d’écriture

Pour finir d’ajouter notre police d’écriture originale sur WordPress, nous allons utiliser du code CSS. Selon votre thème installé, vous avez différents endroits pour personnaliser votre feuille de style nommée style.css.

Personnaliser le code CSS sur un thème classique

• Rendez-vous dans le panneau d’administration de WordPress et cliquez sur ‘apparence’.
• Cliquez ensuite sur ‘personnaliser’.
• Sélectionner l’onglet CSS additionnel.

Personnaliser le code CSS sur un thème FSE

• Dans la colonne de gauche, cliquez sur ‘apparence’.
• Sélectionnez l’option ‘éditeur’.
• Cliquez sur la page.
• Cliquez sur le cercle noir et blanc en haut à droite.
• Cliquer sur les trois petits points juste en dessous de ce cercle.
• Cliquez sur ‘css additionnel’.

Vous êtes maintenant sur la feuille de style du thème. On va pouvoir intégrer notre code.

Ajouter la police de caractères sur WordPress avec le CSS

Pour pouvoir utiliser la police stockée sur notre serveur tapez le code CSS suivant :

@font-face {

/* indiquez le nom */
font-family: nomdemapolice;

/* indiquez le chemin du fichier */
src:  url(/fonts/nomdemapolice.woff) format (woff);

/* indiquez l'épaisseur : 100, 200, 300, bold etc */
font-weight: 300;

/* indiquez le style : normal ou italic */
font-style: normal;

/* optimisez l'affichage */
font-display: swap;

}

Si vous voulez ajouter plusieurs polices, mettre une police par défaut ou en savoir un peu plus sur ce code CSS, je vous invite à lire la documentation.

Sélectionner les balises HTML pour modifier la police d’écriture en CSS

Vous pouvez utiliser et sélectionner vos balises HTML directement avec le CSS pour utiliser la police qui a été ajoutée. Les balises les plus courantes sont les suivantes :

• p: pour un paragraphe
• ul: pour une liste
• li: pour un élément de liste (list item)
• a: pour un lien hypertexte
• h1, h2, h3, h4, h5, h6: pour les titres

Ainsi, pour utiliser la police de caractères sur les paragraphes on utilisera le code suivant sur la balise ‘p’:

p {
font-family: nomdemapolice;
}

Pour en connaître un peu plus sur les balises, je vous invite à lire cette documentation consacrée au HTML.

Changer la police de caractères de WordPress avec les classes CSS ou l’identifiant

Si vous vous simplement modifier l’écriture d’une ligne ou d’une partie d’une ligne, vous pouvez utilisez l’identifiant ou une classe. La partie HTML ressemblera à ceci :

<p id="monId" class="maClass">Mon texte</p>

Vous pouvez ensuite modifier la police en sélectionnant l’identifiant unique :

#monId {
font-family: nomdemapolice;
}

Ou par sa classe si vous voulez l’utiliser à plusieurs endroits sur votre page :

.maClass {
font-family: nomdemapolice;
}

Voilà, vous connaissez tout sur l’installation d’une police de caractères originale sans utiliser d’extension. Nous allons voir une méthode moins technique qui consiste à utiliser un plugin.

Comment ajouter une police d’écriture avec une extension WordPress

Vous n’avez peut-être pas envie d’utiliser Filezilla pour ajouter une nouvelle police d’écriture sur votre site Internet. Rassurez-vous, il existe des plugins WordPress pour vous faciliter la vie. L’extension que je vous conseille pour changer la police de caractères de WordPress se nomme Custom fonts.

vous pouvez suivre cette vidéo :

L’interface a un peu changé, mais l’utilisation est la même :

Comme le montre cette capture d’écran, sur la gauche, pour changer la police de caractères de WordPress vous lui donnez un nom. Vous indiquez ensuite le chemin du fichier puis vous sélectionnez le style et la graisse.

Vous avez un aperçu direct de la police sur la droite sur lequel vous pouvez agir sur la taille de la police. Vous pouvez modifier la taille pour un meilleur aperçu. Simple, non ?

Répétez l’opération pour ajouter une nouvelle police d’écriture originale sur WordPress.

Le mot de la fin

Voilà. Vous savez tout sur méthodes pour changer la police de caractères de WordPress.

Modifier l’apparence de votre site ne le rend pas performant pour autant. Vous devrez sans doute faire des optimisations pour l’affichage des polices d’écriture sur votre site Internet afin de correspondre aux critères de Google. Ainsi ce ne doit pas être votre priorité. Pensez plutôt à une bonne expérience utilisateur, un affichage rapide et une optimisation pour la conversion. Si vous ne savez pas comment faire, je réalise des sites internet qui répondent à ces critères. N’hésitez pas à faire appel à moi.

Articles similaires :

• La médiathèque de WordPress : tout ce qu’il faut savoir sur les médias.