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…
Où trouver une police/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.
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.
É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…
É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 !
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.
É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”.
É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”>
É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;
}
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.
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…
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…
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 !
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 ?
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
Merci @sandrine 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 !
Bonjour, j’ai voulu suivre la méthode 1, et je n’ai eu aucun problème jusqu’à l’étape 3. Je ne comprends pas où coller le bout de code. Dans mon FTP, j’ai soit un fichier style.css (à la racine de mon thème), mais si c’est dans ce fichier, je ne sais pas où mettre ce code, car il y a déjà des centaines de lignes. Cela a-t-il une importance ?
Sinon, j’ai aussi un dossier qui s’appelle css, et dedans il y a soit un fichier font-awsome.min.css soit un sous-dossier appelé Fonts dans lequel je trouve des fichiers appelés flexslider-icon.eot, svg, etc.
Pourriez-m’aider ? Merci beaucoup !!
Je précise que je n’ai pas l’intention ensuite de passer à l’étape 4 car je ne souhaite utiliser ma nouvelle police que dans certains articles, dans le corps du texte pour certaines parties que je souhaite mettre en relief. Je pensais utiliser une balise pour appeler ma police. Est-ce un problème ?
Encore un grand merci si vous pouvez m’aider :)
Bonsoir @small
Si j’ai bien compris votre demande, vous ne savez pas où coller le code évoqué dans l’étape 3 de la méthode 1 (méthode @font-face) c’est bien cela ? Si c’est le cas, vous devez collez ce code dans le fichier style.css de votre THEME ENFANT, soit à la suite du code déjà présent, soit au début, cela ne devrait pas avoir d’importance… Si vous n’avez pas de thème enfant, essayez de coller ce code dans l’onglet APPARENCE > MODIFIER LE CSS depuis le back-office d’administration de votre site WordPress… Cela devrait être pris en compte ! Par contre quand vous dites que vous ne souhaitez pas passez par l’étape 4, je pense que cela pourrait être intéressant de créer une classe spéciale par exemple “.ma-police” que vous pourriez attribuer sur vos balises que lorsque vous le souhaitez… Dans ce cas, l’étape 4 du tuto deviendrait :
.ma-police {
font-family: ‘wpf’, Arial, sans-serif !important;
}
Ensuite, lorsque que vous voulez faire apparaître la police dans votre page ou votre article, il faudra passer l’éditeur en version “texte” puis utiliser une balise appropriée telle que :
C’est mon super texte !
Vous me suivez ? J’espère avoir été assez claire ! N’hésitez pas à nous faire un retour…
@lycia merci de vos conseils, malheureusement cela ne fonctionne pas.
Les changements ne se voient que sur le poste où j’ai installé les polices (ce qui était déjà le cas lorsque je m’étais arrêté à l’étape 2) mais dés que je vais sur un autre ordinateur, je retrouve ma police classique.
J’ai essayé de mettre le code dans Apparence > CSS personnalisé (plugin CSS custom) puis comme cela ne marchait pas, dans Apparence > Personnalisez > CSS additionnel. Non seulement ça ne fonctionne toujours pas sur un autre poste, mais ça annule la police sur celui où ça marchait.
Dans Apparence, je n’ai pas d’autre endroit où je peux modifier le CSS, si ce n’est dans Editeur, mais là ce sont les fichiers du FTP, non ?
En désespoir de cause, j’ai donc essayé de mettre le code à la fin de mon fichier style.css mais ça ne fonctionne pas non plus. (vous l’aurez deviné, je n’ai pas de thème enfant).
J’ai même essayé d’ajouter l’étape 4, à la suite du code, dans CSS personalisé, mais ça ne change rien.
Une autre idée ?
Bonjour,
Je suis en train d’essayer la police de mon site WordPress (hébergé sur o2switch) en la méthode @font-face. J’ai choisi ma police, j’ai mis les 5 fichiers dans le dossier mon thème enfant, et c’est juste après que je beugue, au moment d’appeler la police sur les balises désirées.
J’ignore comment faire ça (par exemple, pour choisir de le faire sur mon titre, mes menus…etc), et j’ignore aussi si je dois faire ça depuis mon FTP (o2switch, donc) ou depuis l’encart style.css de tableau de bord, qui mélange tout plein de polices (Ubuncu, arial…etc).
Une idée ?
Merci pour vos conseils :)
Bonsoir @small , apparemment vous avez quelques soucis… Avez-vous suivi scrupuleusement l’étape 2 et l’étape 3 de la méthode @font-face ??? L’erreur doit bien venir de quelque part. Premièrement où avez-vous placé vos fichiers de police : à la racine ou dans un sous-dossier ? Cela a une importance. Ensuite, à l’étape 3, lorsque vous connectez votre nouvelle police, pouvez-vous vérifier que vous employez bien les bons noms de fichiers, les majuscules ou autres caractères ont une importance également. Et enfin, cela vaut pour @anne et @small il faut bien appeler la police sur vos balises HTML. Par exemple : un titre 1 est une balise h1 située entre un “”. Dans ces balises, vous pouvez ajouter une classe qu’il faut créer préalablement dans votre fichier style.css. Cette classe sera par exemple :
.ma-police{
font-family: ‘wpf’, Arial, sans-serif !important;
}
Ensuite, sur vos balises, vous appliquez cette classe. Par exemple = h1 class=”ma-police” , le tout encapsulé entre “” (je suis désolée de l’écrire de cette manière mais le système de commentaire supprime mes balises, j’espère que celles-ci apparaîtront à l’écran), sinon veuillez vous reporter à cet article : http://css.mammouthland.net/selecteurs-css-class-id.php
Note pour @anne : les classes s’appellent depuis votre fichier style.css
Bon courage à vous deux !
Bonjour !
J’ai suivi toutes les étapes (via CSS) pour modifier mes polices, sans succès. J’ai bien converti mes fichiers, mis sur mon FTP, intégré le code dans ma feuille de style (thème enfant), mais rien à faire… J’ai testé autrement, en modifiant la couleur et la taille via le même thème et le même code et ça fonctionne, il n’y a donc bien que la police qui ne veut pas se changer… J’y ai passé l’après-midi, je ne sais plus où essayer ^^ J’ai même reessayé de zéro, 2 fois et avec des polices différentes pour voir si le problème ne venait pas de là, mais non…
Je précise que je suis sur un thème Solopine et non un thème WP ; pourrait-il m’empêcher de toucher à la police ? Y-aurait-il un système de priorité quelconque ? Bref, je suis perdue ^^ Merci par avance pour le moindre conseil !
Salut ! Voilà un article qui va améliorer beaucoup de choses. J’ai hâte de changer tout ça. Merci beaucoup Lycia ????