Fermer sur cette pageclose X

WORKBOOK OFFERT

Préparez la stratégie de votre site Internet pour augmenter vos conversions.




j'accepte la politique de confidentialité.
Accueil » Blog » Comment changer la police de caractères sur WordPress

Comment changer la police de caractères sur WordPress

5/5 - (1 vote)

Changer la police de 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.

comment changer la police de caractères sur WordPress
Comment changer la police de caractères sur WordPress

Les différentes polices d’écriture de WordPress

Dans les prochaines versions, WordPress va intégrer directement les polices Google fonts. 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.

1 – 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.

2 – Modifier la police d’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 sur Google fonts sur WordPress ?

Si votre thème ne propose pas les polices de Google, vous pouvez les intégrer à WordPress en utilisant du code CSS. Pour ça vous devez télécharger la police de caractère 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. Ç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.

1 – Télécharger une police de caractères sur Google Fonts

Suivez ces étapes simples pour ajouter une police Google :

  • rendez-vous sur le site Google Fonts
  • 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

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

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

2 – 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.

convertir un fichier TTF au format WOFF
Convertir un fichier TTF au format WOFF

3 – 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éer un nouveau dossier sur WordPress avec Filezilla
Créer un nouveau dossier sur WordPress avec Filezilla

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.

créer un dossier nommé fonts sur son serveur web
Créer un dossier nommé fonts sur son serveur web

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.

4 – 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.

Modifier la police 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 ça se nomme Custom fonts.

custom fonts
custom fonts

vous pouvez suivre cette vidéo :

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

interface de custom font
interface de custom font

Comme le montre cette capture d’écran, sur la gauche, vous donnez un nom à la police. 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.

Utiliser Envato pour trouver des polices de caractères

Envato Elements est sans aucun doute la meilleure plateforme pour choisir une police d’écriture originale professionnelle avec un large choix de plus de 48000 polices de caractères de disponible. Vous êtes sûr d’y trouver votre bonheur. N’oubliez pas de choisir une police bien visible.

Attention aux licences, une police en version free ne peut être utilisée que si vous n’avez aucune monétisation de quelque sorte que ce soit sur votre site web. Elle est également uniquement qu’utilisable sur votre site Internet.

Le mot de la fin

Voilà. Vous savez tout sur méthodes pour changer la police de caractères sur 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 à visiter WPCreatif.

Laisser un commentaire