Comment modifier sa « font » ou police d’écriture dans WordPress

La plupart des thèmes WordPress commercialisés sur le marché vous propose tout un tas d'options de personnalisations dont, la plupart du temps, le choix de la police d'écriture ou "font" en anglais...

Cependant, ces thèmes vous permettront généralement de choisir votre police dans la bibliothèque Google Font. Mais qu'en est-il de votre propre police que vous avez acheté sur un site dédié ? Vous savez, LA font sur laquelle vous avez craqué et qui ne ressemble à aucune autre ?

Nous allons voir ensemble comment modifier la police d'écriture de votre site WordPress selon plusieurs méthodes...

Font personalisée WordPress-une

Où trouver une font originale ?

Il est vrai qu'avant de commencer à parler de la méthode pour ajouter une police, il serait bien de commencer par en trouver une...

Si vous ne savez pas trop où chercher, je vous propose de fureter du côté des sites où les designers tiennent une boutique. La liste est longue mais j'ai généralement trouvé mon bonheur sur Creative Market, The Hungry Jpeg, Typekit ou MyFonts...

Vous pouvez également utiliser des polices gratuites disponibles en téléchargement sur des sites comme Dafont ou FontSquirrel mais il ne faudra pas oublier de vérifier leur licence avant de les exploiter... Sinon, vous pouvez toujours utiliser la bibliothèque proposée par Google Font.

Creative Market Store

 

Comment intégrer une police dans WordPress ?

Option 1 : la méthode @font-face

C'est une règle disponible depuis CSS3 qui permet de définir et de fournir les fonts contenues dans vos pages web ; les navigateurs ne dépendront donc plus des polices installées sur les ordinateurs de vos lecteurs... Avec cette méthode, tout est permis : vous pourrez intégrer n'importe quelle police à votre site...

ÉTAPE 1 : réunir tous les fichiers nécessaires

Une fois que vous aurez trouvé la police idéale, il vous faudra télécharger tous les fichiers nécessaires. Vous aurez besoin :

  • d'un fichier Embedded OpenType Font (.eot)
  • d'un fichier Scalable Vector Graphic (.svg)
  • d'un fichier Police TrueType (.ttf)
  • d'un fichier Web Open Font Format (.woff)
  • d'un fichier Web Open Font Format 2.0 (.woff2)

Il faut savoir que si vous achetez une police premium, elle devrait être livrée avec l'ensemble de ces fichiers... Par contre, si vous téléchargez une police gratuite sur Dafont par exemple, vous avez de grandes chances de n'obtenir qu'un seul de ces fichiers. Vous pourrez alors tenter de convertir vos fichiers grâce à un générateur en ligne tel que celui offert par Fontsquirrel.

Generateur de webfont Fontsquirrel

ÉTAPE 2 : envoyer les fichiers sur votre serveur

Idéalement, vous aurez préalablement créé un thème enfant afin que la prochaine mise à jour de votre thème n'écrase pas vos modifications. Pour cela, n'hésitez pas à lire ce tutoriel dédié aux thèmes enfants. Ensuite, il vous suffira d'envoyer les 5 fichiers (.eot, .svg, .woff, .woff2, .ttf) à la racine de votre thème enfant, ou bien dans un dossier que vous pourriez nommer "fonts", via FTP à l'aide d'un outil tel que Filezilla par exemple.

ÉTAPE 3 : connecter la nouvelle police à votre thème

Cette étape est très simple, il vous suffira d'ajouter dans le fichier style.css de votre thème enfant ces quelques lignes de code :

@font-face {
font-family: 'wpf';
src: url('wpf.eot');
src: url('wpf.eot?#iefix') format('embedded-opentype'),
url('wpf.woff2') format('woff2'),
url('wpf.woff') format('woff'),
url('wpf.ttf') format('truetype'),
url('wpf.svg#svgwpf') format('svg');
}

Pour cet exemple, ma police s'appelle "wpf", il vous suffira donc de changer cela par le nom de votre police. Veillez à respecter les majuscules, les espaces etc...

Code CSS pour font personnalisée

ÉTAPE 4 : appeler la police

Maintenant que votre thème enfant contient les fichiers de police et que votre fichier style.css est connecté à celle-ci grâce à la méthode @font-face, il vous suffira d'appeler la font sur les balises désirées. Pour mon exemple, j'ai appliqué ma nouvelle police uniquement sur mes titres avec ce code :

h1, h2, h3, h4, h5, h6 {
font-family: 'wpf', Arial, sans-serif !important;
}

Notez :  [!important] n'est pas obligatoire, rajoutez-le si la font ne parvient pas à être prise en compte.

Avec cette méthode, vous pourriez décider d'importer plusieurs polices différentes et de les assigner uniquement sur certaines balises ou classes prédéfinies et, ainsi, laisser libre court à votre imagination !

Modification de la police

 

Option 2 : Utiliser la bibliothèque Google Font

Vous pourriez être amené à utiliser cette bibliothèque si votre thème ne propose pas cette fonction, si vous n'avez pas envie d'acheter votre police ou bien tout simplement parce que vous avez trouvé votre bonheur dans cette bibliothèque... Son avantage est que votre site fera appel à la font stockée en ligne chez Google Font et, de ce fait, vous n'avez pas besoin de télécharger les fameux fichiers dans votre thème WordPress.

Rendu visuel Google Font

ÉTAPE 1 : choisir sa police Google Font

Cette étape est plutôt logique ! Pour cela, vous n'aurez qu'à vous rendre sur le site de Google Fonts et repérer la police idéale. Une fois trouvée, il vous suffira de cliquer sur le petit "+" situé en haut à droite de la police en question. Une petite popup discrète apparait alors en bas de votre écran, cliquez dessus afin de la déployer. Nous nous intéresseront à l'onglet "embed".

Obtenir la Google Font

ÉTAPE 2 : connecter la Google Font à votre thème

Pour cette étape, vous aurez besoin de dupliquer le fichier header.php de votre thème parent. Modifiez cette copie (avec un éditeur de texte tel que Sublim Text par exemple) en insérant la ligne de code proposée par Google Font entre les balises <head> et </head> de ce fichier. Sauvegardez ce fichier et envoyez-le, via FTP, dans le dossier de votre thème enfant.

Pour mon exemple, la ligne de code que j'ai insérée est la suivante :

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

Google Font Etape 4

ÉTAPE 3 : appeler la Google Font

Comme pour la méthode @font-face, il ne vous restera plus qu'à faire appel à votre police en l'attribuant à vos balises désirées dans le fichier style.css de votre thème enfant. Pour cela, vous aurez besoin de la deuxième information fournie par le site Google Font dans la section "Specify in CSS". Pour mon exemple, j'ai décidé d'appliquer cette police à l'ensemble de mon site, c'est à dire sur la balise "body" avec le code suivant :

body{
font-family: 'Raleway', sans-serif !important;
}

Code CSS Google Font

Notez :  [!important] n'est pas obligatoire, rajoutez-le si la font ne parvient pas à être prise en compte.

 

Option 3 : à l'aide d'un plugin

Cette option n'est pas la meilleure à mon goût mais elle peut vous convenir si vous ne vous sentez pas encore prêt à créer un thème enfant et/ou à manipuler du code... Il existe donc un plugin qui vous propose de modifier vos polices sans coder, il s'agit de USE ANY FONT.

Plugin WordPress Use Any Font

Il vous suffira d'installer ce plugin freemium via le catalogue des plugins de WordPress. Lorsque vous l'activerez, vous verrez apparaitre de nouvelles options dans la barre d'outil de l'éditeur d'article ou de page vous permettant de choisir parmi l'une des quelques polices basiques mises à disposition...

Polices basiques Use Any Font

Par contre, il faudra obtenir une API Key moyennant la création d'un compte gratuit ou payant (au choix) pour pouvoir télécharger votre propre police... Vous arriverez vite à la version payante puisque la version free vous permettra de n'utiliser qu'une seule police... À méditer...

Use Any Font api-key

 

Option 4 : votre thème premium propose cette option

Si vous prévoyez d'utiliser un thème WordPress Premium, sachez que certains d'entre eux propose l'option d'intégrer sa propre police d'écriture. Des encarts de téléchargements pour chaque fichier (.eot, .svg etc...) sont prévus dans les réglages du thème... C'est le cas par exemple d'Avada, de BeTheme, de TheGem etc...

 

En conclusion...

Dans une société où l'aspect visuel joue un rôle prépondérant, l'utilisation adaptée de polices d'écritures originales est déjà un bon début pour se démarquer du voisin ! En plus, vous avez vu que ce n'est pas bien compliqué... Alors, à vos claviers !

A propos de l'auteur...

Lycia Diaz

Freelance WordPress, Rédactrice Web et Webdesigner, je suis passionnée par le monde du web et de l'environnement Apple... Je tiens également un blog qui traite de ces sujets. J'adore découvrir, tester et partager mes expériences mais aussi créer et réaliser de nouveaux projets ! Je suis auteure d'un guide complet sur WordPress.

3 commentaires pertinents à ce jour ;)

  • Merci Lycia pour ce beau bilan !
    J’aime bien aussi farfouiller du côté de Creative Market ;)
    Concernant l’utilisation d’une google font, n’est-il pas plus intéressant d’utiliser le fichier function de son thème enfant avec wp_enqueue_style ?
  • Anjy NY AVO dit :
    Merci pour cet article très complet. N’étant pas très familières aux lignes de codes, le plugin use any font m’a beaucoup aidé pour mes blogs
  • Lycia dit :
    Merci pour avoir souligné cette autre méthode ! En effet, on peut aussi utiliser la fonction « wp_enqueue_style » : dans ce cas là, il faudra éditer le fichier functions.php de son thème enfant en y créant une nouvelle fonction. Cela évitera alors de dupliquer le fichier header.php
    Il y a encore une autre méthode : en passant par du JavaScript … C’est là qu’on voit que WordPress offre des tas de possibilités et qu’il y en a pour tous les goûts !

Et si vous donniez votre avis ?

Tweet27
Share18
Share3
Buffer8