Depuis quelques jours l’envie d’intégrer une police personnalisée sur ce blog me taraude !

Et dans ce genre de situations mon réflexe est de faire une requête appropriée sur Google, ici  :
« comment mettre une police personnalisée sur WordPress » requête à laquelle je suis tentée de rajouter : « pour les nuls » !

Car, bien souvent aux questions simples  de « débutants », on obtient des réponses détaillées d’experts altruistes, qui expliquent absolument tout sur la procédure à suivre, tout sauf THE petit détail qui permet de parvenir à ses fins dans un délai correct !

En général on arrive presque à obtenir le résultat souhaité, mais c’est là ou le mot presque prend tout son sens, car au moment de savourer le résultat en  rafraichissement sa page, et bien au mieux rien ne se passe et au pire votre blog a disparu corps et âme !

Succède alors une longue période de doute, où l’on teste sans conviction 1000 petites choses, soit pour y arriver quand même, soit pour récupérer son blog !   C’est ce qui m’est arrivé ce matin !

Alors si vous aussi vous aimeriez arborer une police personnalisée sur votre blog, mais que vous ne savez pas comment faire, voici  quelques conseils d’une débutante désormais avisée, qui pourront peut-être vous faire gagner un peu de temps :

…

1. Bien choisir sa police ou petits rappels sur les polices

Partie réalisée après lecture du super livre CSS3 de Jason Cranford Teague,  livre à la fois simple et super complet, le meilleur que j’ai lu sur le sujet des CSS.

Mais revenons à nos moutons : le design d’un blog est géré par sa feuille de style (CSS), avec celle-ci on peut personnaliser le design de son blog et notamment  la façon d’écrire les textes grâce aux polices notamment.

Mais sur internet, avant de gérer les polices en elles-mêmes (arial, times, helvetica…) on gère d’abord des familles de polices (font-family), il en existe 5 au total  :

Serif : Ce sont des polices « classiques » elles ont une petite extension à la fin de certaines lettres, elles sont plutôt utilisées pour les affichages en gros caractères, les titres par exemple, car en petit elles peuvent être peu lisibles (exemple : Times new roman)

Sans serif : c’est l’inverse, pas d’empattement, elles ont donc plutôt utilisées pour le corps des petits textes (exemple : Arial, Helvetica)

Monospace : Rien à voir avec les voitures familiales, les monospaces peuvent être serif ou non serif, chaque lettre occupant  la même largeur (minuscule ou majuscule, I ou W), elles sont particulièrement lisibles et indiquées pour les textes précis : formules de math, textes juridiques … (exemple : courier new)

Cursives : ces polices imitent l’écriture manuscrite, avec des lettres reliées, peu lisibles, elles sont plutôt recommandées pour les titres (exemple : Brush script)

Fantasy : constituée d’icônes plus que de lettres, très fantaisies (exemple : papyrus)

Dans chacune de ces familles, on peut classer quasiment l’ensemble des polices existantes.

Problème : les principaux  navigateurs (firefox, internet explorer, safari, Chrome…) sans indication particulière, ne lisent qu’un nombre restreint de polices, c’est pourquoi  sur les blogs on retrouve toujours les mêmes polices : Helevetica, Arial, Georgia …

Et c’est également pour ça qu’il faut indiquer une famille de police et non une seule police en particulier dans votre CSS, comme ça si le navigateur de l’un de vos lecteurs ne lit pas correctement une police, il choisira la 2ème, puis la 3ème au lieu d’afficher votre blog de façon arbitraire.

Exemple :

• Body { font-family : helvetica, arial, sans serif; }

• h1, h2, h3, h4, h5, h6 { font-family : georgia, times, « times new roman », serif;}

Ces 3 polices du « body » font partie d’une même famille (idem pour les titres) et elles sont ainsi classées par ordre de préférence, majoritairement les textes du blog s’afficheront en helvetica et les titres en Georgia.

Si toutefois un navigateur ne les prenait pas en compte il afficherait alors le blog dans la 2ème police indiquée.

(les polices qui ont des espaces comme « times new roman » doivent être mis entre parenthèse).

Mais heureusement  il est quand même possible de rajouter d’autres  polices pour personnaliser le design de son blog, il suffit de suivre les 4 étapes suivantes.

Avertissement :

Si vous êtes déjà un pro du net, ne perdez pas votre temps, passez directement à la conclusion !

Si vous êtes totalement débutant et/ou que vous ne gérez pas vous même votre blog, ne tentez pas le diable, demandez de l’aide à votre webmaster et  passez vous aussi à la conclusion !

Pour les autres :

…

2. Sélectionner une police et si besoin la télécharger sur son ordinateur

Le plus simple est de transférer une police déjà présente sur l’ordinateur, si c’est le cas, passer directement à l’étape 3.

Sinon, il faut en trouver une sympa sur les sites dédiés et la télécharger, rien de vraiment compliqué (surtout quand on sait le faire !)

Personnellement, n’étant pas du tout une experte du web design, je me contente largement des polices  proposées  sur le site de Dafont, elles sont pour la plupart gratuites pour un usage personnel.

Il suffit d’aller sur le site, de sélectionner une police et de cliquer sur télécharger, une boite de dialogue propose d’enregistrer le fichier, répondre oui et cliquer sur ok.

Le fichier est ainsi téléchargé sur l’ordinateur, il faut le dézipper (extraire les fichiers), pour ma part j’utilise 7-zip, mais là aussi il y a le choix.

Une fois dézippé, un dossier avec le nom de la police s’affiche et dedans il y a le fichier de la police, pour ma part c’est : androgyne_tb.otf

Pour utiliser la police sur un blog, passer à l’étape 3, pour l’utiliser aussi sur Powerpoint, Word…
sur PC : aller dans Démarrer, Panneau de configuration, double cliquer sur l’icône police et glisser le fichier de la police nouvellement téléchargé (et dézippé) dans la fenêtre avec les autres polices.
ça y est elle est prête à l’emploi !

PS : Comme pour la musique il y a des droits d’auteur sur les polices, certaines sont gratuites, d’autres non !

…

3. Mettre la police aux bons formats pour qu’elle puisse être lue par l’ensemble des navigateurs (Internet explorer, Firefox, Safari, …)

Pourquoi faire simple quand on peut faire compliqué ! et bien c’est exactement ce qu’ont du se dire les différents navigateurs, choisissant presque chacun des formats différents, du coup il faut préparer la police pour que chacun d’entre eux puisse la lire.

Il y a une site qui fait ça très bien et qui m’a été conseillé par Maeva Cecchi webdesigner, il s’agit de fontsquirrel.

Il suffit de cliquer sur « add fonts », de sélectionner le fichier de la police que l’on a précédemment téléchargé et dézippé, de choisir une version optimale et de télécharger le tout.

Un nouveau dossier zippé est alors sur l’ordinateur, baptisé : webfontkit xxxxxxx xxxxxx .zip, il faut en extraire les fichiers (le dézipper)  comme précédemment et passer à l’étape 4.

…

4. Coller le code CSS de votre police personnalisée dans la feuille de style de votre blog

Bon jusque la ça va ?

Alors maintenant il faut indiquer dans la feuille de style du  blog la référence de la police que l’on souhaite utiliser.

Ouvrir le back office de WordPress (pour les autres supports, ça doit être à peu près pareil), aller dans « apparence » puis éditeur et ouvrir la feuille de style (CSS).

Si cette zone de votre blog vous était totalement inconnue jusqu’à la lecture de cet article, mieux vaut pour vous et pour votre blog éviter d’aller plus loin, appelez la personne qui vous l’a fait et dites lui quelle police vous souhaitez utiliser et à quel endroit, je pense que c’est plus sage !

Pour les autres : ouvrir le fichier dézippé de l’étape 3 : sous la forme  webfontkit xxxxxxx xxxxxx,  double cliquer sur « stylesheet.css », le contenu doit s’ouvrir dans votre éditeur de texte (Notepad pour ma part), copier toute la ligne qui apparait et coller là au dessus de Body, en haut de la feuille de style, ça doit ressembler au bloc @font-face ci-dessous

Ensuite indiquer dans la feuille de style sur quelles parties du texte  la police en question doit s’appliquer, pour ma part je l’applique uniquement pour mes titres, j’ai donc positionné andogyne en 1ère position dans ma famille de police (font-family), si elle n’était pas bien lue par un navigateur, ce serait  Helvetica qui prendrait le relais.

…

5. Envoyer les fichiers de votre police personnalisée sur le serveur de votre blog

Pas de panique, ça aussi c’est ultra simple et c’est précisément ce qui m’a fait perdre plus d’une heure ce matin ne sachant pas quels fichiers envoyer, ni où les mettre (THE petit détail) !

Au total, il y a 5 documents (5 fichiers) à envoyer sur le serveur de votre blog  :

• Un premier qui reprend le nom de la police et qui se fini en .svg  (androgyne-webfont.svg pour ma part)
• Un 2ème en .woff
• Un 3ème en .eot
• Un 4ème en .ttf

Ce sont les différents formats de fichiers utilisés par les navigateurs

• Un 5ème : la feuille de style de la police : stylesheet.css

Ces fichiers  se trouvent aussi dans le dossier webfontkit xxxxxxx xxxxxx de l’étape 4.

Pour les envoyer : ouvrir votre FTP (Filezila pour ma part),  trouver sur la partie gauche le dossier Webfontkit (partie gauche qui correspond aux fichiers stockés sur votre ordinateur)  l’ouvrir, puis après avoir identifié les 5 fichiers, les envoyer (les faire glisser)  vers la partie droite (celle qui correspond aux fichiers de votre blog) directement à la racine  de votre thème (pour ma part « corporate »  – voir ci-dessous).

En fait c’est exactement comme pour envoyer des photos, sauf que les photos se mettent dans le dossier images du thème alors que ces 5 fichiers se mettent directement dans le thème.

Pour les moins experts qui seraient arrivés jusqu’ici, pour trouver votre thème : cliquer à droite sur « www », puis sur « wp-content », puis sur thèmes, en double cliquant dessus votre thème devrait s’afficher.

NORMALEMENT vos 5 fichiers sont à présents sur le serveur de votre blog et votre police personnalisée est donc NORMALEMENT utilisable !

…

6. Admirer votre blog et votre nouvelle police personnalisée

Si vous avez réussi les 5 étapes précédentes, en rafraichissant votre page internet, NORMALEMENT vous devriez pouvoir admirer le résultat !

Alors, vous voyez bien que mettre une police personnalisée sur son blog, c’est facile, quand on sait le faire !

Si ça ne marche pas ?

Vérifier que la « formule » soit correctement écrite : orthographe correcte, une virgule après chaque police,  un point virgule à la fin :

{ font-family : AndrogyneRegular, helvetica, arial, sans serif ; }

Si ça ne marche toujours pas ?  faites comme moi essayez 1000 petites choses et priez les Dieux de l’internet !

…

Juste pour l’anecdote, après avoir passé ma matinée à choisir ma police (Androgyne) et à l’intégrer sur mon blog, je montre fièrement le résultat à une personne très proche de moi, personne dont je préserverai l’anonymat et qui me dit texto :

« J’aime pas trop, je préférais ton blog avant, je le trouvais plus classe ! « 

No comment !

…

Mon blog avant , sans police personnalisée

Mon blog après : avec la police Androgyne

Et vous, vous en pensez quoi ?

Si vous avez aimé cet article, si vous avez encore 2 ou 3 heures de libre devant vous  et si vous souhaitez  savoir comment mettre une image dans votre sidebar sur WordPress, je vous recommande cet autre article !

…