Comment Installer une police d’écriture sur votre blog

Lors de mon précédent article, je vous faisais découvrir de jolies fonts à télécharger pour la création de vos logos et vos bannières. Suite à cet article, j’ai reçu quelques mails me demandant comment faire pour utiliser ces polices d’écritures directement sur son blog.
Je vais donc vous montrer comment faire pour utiliser des fonts téléchargées sur un blog WordPress auto-hébergé. Pour vos titres par exemple ou bien pour le texte de vos articles.
Veillez à bien choisir une police d’écriture lisible, il en va du bien-être de vos lecteurs car une Police peut très bien convenir pour un titre mais devenir complètement illisible quand elle est utilisée pour afficher plusieurs lignes de texte.

Comment Installer une police d’écriture sur son blog

Dans un premier temps, il vous faut trouver la font que vous souhaitez utiliser pour agrémenter votre blog puis :

• Télécharger là sur votre ordinateur
• Dézippez le fichier compressé

Ensuite, il faut envoyer le fichier de la police d’écriture (NomDeLaFont.otf ou NomDeLaFont.ttf) dans le dossier «fonts» de votre thème sur votre hébergement.
On effectue cette manip avec un client (logiciel) FTP gratuit tel que Filezilla

Comment utiliser Filezilla

Voici une petite vidéo explicative pour vous aider à vous connecter au serveur FTP.

Identifiants nécessaires :

• Nom d’hôte(Serveur FTP) : ftp.XXXXXXXXX.XXX
• Identifiant (Login FTP)
• Mot de passe (Password FTP)
• Port: 21

Une fois connecté avec les identifiants que votre hébergeur vous a fournis à l’ouverture de votre hébergement, transférez le fichier de la police d’écriture dans le dossier de votre thème WordPress.
Ex: MonBlog/wp-content/themes/MonTheme/Fonts
Si votre thème ne contient pas de dossier fonts, ce qui est possible, créez-en un (clic droit / nouveau dossier).

Modifier la feuille de style wordPress

Maintenant, il va falloir indiquer à votre thème que vous souhaitez utiliser cette police d’écriture. Pour cela, il faut aller modifier le fichier style.css et écrire quelques règles de CSS.
ATTENTION : avant toute modification, assurez vous que vous possédez une copie de sauvegarde du fichier style.css.

Pour ce faire, nous avons trois possibilités :

1. 1 – En utilisant un éditeur de code (Notepad++)
2. 2 – En éditant la feuille de style dans le tableau de bord de votre blog
3. 3 – En inscrivant les lignes de code CSS dans la partie «modification des CSS » dans la personnalisation de votre thème (pas disponible sur tous les thèmes)

1- En utilisant un éditeur de code

Ouvrez le fichier Style.css de votre thème (NomDuTheme/style.css), modifiez-le comme indiqué ci-dessous puis envoyez-le sur votre hébergement avec Filezilla. Vérifier bien que vous l’envoyez dans le bon dossier : MonBlog/wp-content/themes/MonTheme/style.css

2- Dans le tableau de bord de votre blog

Apparence > éditeur > style.css > mettre à jour le fichier (après avoir fait les modifications)

3- Dans l’option personnalisation de votre thème

Tableau de bord > Apparence > Personnaliser > custom CSS (ou équivalent)

Utilisez la police d’écriture sur le blog

Copier le code suivant dans le fichier style.css en remplaçant RafkaScriptDemo.otf – qui est le nom de ma police – par le nom de la votre.

Explication du code CSS

@font-face -> Sert à définir les polices d’écriture à utiliser pour afficher le texte de votre blog.
font-family: Rafka -> Indiquez ici le nom de votre font
src: url(‘fonts/RafkaScriptDemo.otf’) -> Ici on indique le chemin à suivre pour trouver la police, « fonts » étant le fichier que nous avons créé plus haut.
Attention à ne pas oublier le ; à la fin des lignes, les accolades et les guillemets sinon vous allez avoir un joli message d’erreur.

Maintenant nous allons voir comment faire pour que nos titres de billets s’affichent avec elle. Normalement, votre titre va être entouré de balise H1 ou H2.
Pour connaître la balise qu’a utilisé de créateur de votre thème pour vos titres, vous avez une option très utile sur votre navigateur Chrome : sélectionnez votre titre > clique droit > inspecter
Dans le bas de celui-ci, une fenêtre va s’ouvrir avec le code de votre titre surligner. C’est le même principe avec le navigateur FireFox.

On ne le voit pas sur ma capture d’écran, mais le numéro de ligne du fichier style.css où est située la balise concernée apparaît dans le cadre en bas à droite. Pour ceux qui utilisent un éditeur de code, c’est très pratique pour trouver facilement la ligne, car ce type de fichier peut contenir énormément de code.

À présent que nous savons que notre titre est codé en h2 nous allons configurer notre feuille de style pour lui dire d’utiliser la police d’écriture Rafka pour les h2
Pour cela dans le fichier style.css recherchez ces lignes (si votre titre est en h1 remplacer h2 par h1)

h2
{
}

Si elle n’existe pas, écrivez :

h2 {
font-family: Rafka;
}

Si elle existe et contient déjà des informations par exemple

h2{
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
}

Remplacez  « Arial,  » par « Rafka; » (sans les guillemets).

 

« sans-serif » est la police par défaut du navigateur. Elle sera utilisée sur Rafka n’est pas trouvée.

Après enregistrement et en rechargeant la page, votre article devrait avoir maintenant un joli titre.

Pour utiliser la font en tant qu’écriture par défaut de votre blog vous devez faire les modification dans :

body {
font-family: Rafka, sans-serif;
font-size: 14px;
color: #333;
}

Si vous voulez que ce soit le texte en gras qui change de style :

strong {
font-family: Rafka;
}

Beaucoup de choses sont modifiable avec les CSS, n’hésitez pas à faire des recherches sur le net.

Modifier directement les fichiers de votre thème n’est pas une méthode – à terme – que je vous recommande, puisque si votre thème est mis à jour par son créateur toutes les modifications que vous y aurez apportées se retrouveront effacées. Pour éviter ce désagrément il existe une méthode qui consiste à créer un thème enfant et de faire les modifications voulues dans celui-ci. C’est très simple à mètre en place, je vous montrerai comment faire dans un prochain billet.

En attendant, j’espère que ce billet un peu plus technique que d’habitude vous à plus. N’hésitez pas à me dire ce que vous en avez pensé.