How to… personnaliser ses polices pour wordpress

How to… personnaliser ses polices pour wordpress

personnaliser-ses-polices

Aujourd’hui j’améliore un peu mon blog : je mets les polices correspondantes à mon logo et mon identité graphique en générale. Étant nouvelle sur wordpress, je demande à mon ami Google et je tombe sur un très bon article du blog delphine-desmarets.com. Un peu vieux peut être mais toujours d’actualité et fonctionnel. Je te fait partager de la manip, qui requiers quelques connaissances de base.

Ce que vous devez savoir et savoir faire :

  • Savoir ce qu’est une police
  • Choisir sa police avec soin (je parle de technique et non d’esthétique)

  • La télécharger sur votre ordinateur

  • Savoir où se trouve l’éditeur WordPress

Théorie

Un site ou un blog, en général, est développé en html (html 5 maintenant même !) pour sa contruction générale et ses contenus. L’apparence, elle, est gérée par une feuille de style en langage CSS. Le site CSS zen garden illustre ce fontionnement en montrant comment un même contenu html peut être habillé très différemment avec divers CSS.

Pour s’afficher, les polices, comme les images ont besoin de ressources. La police peut être installée sur votre ordinateur. Si tu choisis des polices qui sont installées sur tous les ordinateurs, les polices systèmes, par de soucis (encore que, les polices systèmes des mac et pc ne sont pas les même par exemple). Mais si tu viens de télécharger ta police sur Da font, elle ne risque pas de se trouver installée sur l’ordinateur de M. ton visiteur.

Dans ce cas il te faut héberger ta police, comme le reste de ton site ou blog.

Une fois la ressource assurée, il faut faire le lien entre le site/blog et la ressource pour que la police s’affiche correctement là où c’est nécessaire. La feuille de style CSS gère non pas une police, mais une série de polices pour chaque format, pour pallier aux soucis de ressources. Une stratégie est de mettre en premier la police personnalisée, puis une seconde système par exemple, et enfin en dernier une « famille de police ». Si le navigateur 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.

Il existe 5 « font family »

Serif : polices type livre, avec « empattements », c’est à dire de petites pattes qui dépassent à la fin des tracé des lettres, comme la très célèbre Times New Roman.

Sans serif : polices sans les fameux empattements, plus modernes, souvent utilisées pour le web. Par exemple l’Arial ou le Verdana. Dans mon blog j’utilise la police Avenir, également de cette famille.

Monospace : polices pour lesquelles chaque lettre occupe la même largeur (mon dieu quelle horreur), par exemple : Courier New (bahhhh). Uniquement pour les formules de math ou un faux tapé machine à mon avis.

Cursives : polices qui imitent l’écriture manuscrite, pour les titres. La police par défaut pour moi, Brush script, n’est pas très jolie selon moi.

Fantasy : polices fantaisiste, pour les titre égalements. La police par défaut pour moi, papyrus, est assez élégante.

Dans chacune de ces familles, on peut classer quasiment l’ensemble des polices existantes. Celle affichée dépendra des ressources de votre ordinateur, de la langue, et plein d’autres paramètres.

Le code :

font-family : ‘avenir’, ‘arial’, sans serif;

Les polices sont entourées de guillemets, les familles non.

Concrètement

1. Choisis la ou les polices à utiliser

Attention aux droits d’auteur !

2. Mets la police aux bons formats

Problème : les navigateurs (Firefox, Internet Explorer, Safari, Chrome…) choisissent des formats de polices différents. Du coup, il faut préparer la police pour que chacun d’entre eux puisse la lire.

Solution : le « webfont generator » du site fontsquirrel le fait à notre place. Il doit y avoir d’autres solutions et si tu en as une rien ne t’oblige à en changer.

Dans cet outil, cliques sur add fonts,
sélectionnes les fichiers polices sur ton ordi
choisis version optimale
clique sur download the kit
enregistre le zip sur ton ordinateur
dé-zip le dossier.

Basta !

3. Héberger les fichiers polices

Ouvres ton hébergement de site avec ton client FTP (ce qui sert à envoyer les fichiers sur l’hébergement wordpress). Pour ma part j’utilise le logiciel gratuit et fonctionnel depuis des lustres FileZilla (mac et pc !)

Copie les fichier en .svg .woff .woff2 .eot .ttf (les polices aux différents formats) et le stylesheet.css

à la racine DU THEME
www > dossier source du site (n’existe pas toujours) > wp-content > thèmes > nom du thème

3. Modifier la feuille de style CSS

– Nous allons indiquer d’abord les référence.

Ouvres le dossier dé-zippé ouvrir avec un éditeur de texte stylesheet.css. Ce peut être Notepad, personnellement j’utilise TextWrangler sur mac.

Copies l’intégralité du contenu.

Pour WordPress(.org), ouvrir la page d’administration en ligne > apparence > éditeur.

Dans la feuille de style CSS copie tout avant body.

– Ensuite on décide où placer la police

Dans cette même feuille de style affiche la recherche du navigateur (CTRL ou POM + F)

Cherche « font-family »

Ajoute ou remplace la première police en calquant la syntaxe. Pour savoir ce qui s’applique à quoi il faut connaître un peu l’html ou simplement l’anglais. À savoir que body se trouve être le corps de texte, paragraphe en fait, H1 H2 H3… sont les niveaux de titre. Ensuite c’est précisé au coup par coup mais si tu mets partout ta police de paragraphe sauf au titre tu évitera les erreurs majeurs.

personnaliser-ses-polices-avant personnaliser-ses-polices-apres

Ça marche ! Normalement… Non ? Commentaire !

Il existe aussi des solutions de polices hébergées par Google. Je n’ai pas testé mais il parait que c’est très bien à condition que tu trouves ton bonheur dans la liste proposée, donc que tu n’ai pas besoin de police spécifique. Ce qui n’est pas mon cas. Bonne journée !

2 thoughts on “How to… personnaliser ses polices pour wordpress

  1. Bonjour, jai suivi votre tuto à la lettre, mais par contre je voudrais mettre une écriture spéciale juste pour les titres..

    pouvez-vous m’indiquer ou mettre pour les titres ?
    Cordialement
    Jessica

    1. Bonjour !
      Pour le code html pour les titres est h1 pout titre 1 h2 pour titre 2 ect…
      Pour changer cela dans WordPress tu as plusieurs méthodes.
      L’une d’elle est de se connceter sur la plateforme admin,
      dans apparence, éditeur.

      Dans la feuille de style qui apparait alors il faut chercher les fameux h1 h2…
      Pour s’aider la fonction de recherche de texte facilite grandement la manip (CTRL + F ou CMD + F selon la bête utilisée)
      Cherche le passage où la famille de police est définie. Chez moi ça ressemble à ça :

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
      margin: 0;
      color: #111;
      font-family: ‘worstveld_slingregular’ , fantasy;
      font-weight: normal;

      Ce qui veut dire que tous les titres ont la même police.
      Ici il me faudrait changer ‘worstveld_slingregular’ , fantasy pour changer de police de titre.

Laisser un commentaire