Crédit:

Personnaliser la police de son blog avec le CSS

Le CSS permet de personnaliser la mise en forme de son blog. Avec ce langage, le champ des possibilités est assez vaste. On l’a vu dans un autre tutoriel, avec les feuilles de style il est possible de définir la couleur d’un texte, son arrière-plan, son alignement, et même la taille de la police. Mais on peut faire beaucoup plus. Nous allons voir dans ce tutoriel comment utiliser le CSS pour personnaliser une police dans son blog.

  • Changer la police de son blog

En CSS, pour changer la police qui est utilisée dans le thème qu’on a choisi pour son blog, on utilise la propriété « font-family » qu’on applique à la balise qu’on veut modifier (p, blockquote, h1, etc). Par exemple, pour utiliser la police Arial ou bien Times New Roman dans son blog, il suffit d’utiliser la syntaxe suivante :

p { font-family : Arial ; }

ou encore

p { font-family : ‘Times New Roman’ ; }

Remarquons que si le nom de la police est constitué de plus d’un mot, on les met entre guillemets (guillemets simples ou doubles, c’est à votre guise).

  • Police par défaut

En règle générale, quand une police est définie dans le CSS, elle ne s’applique que si elle est installée dans l’ordinateur de celui qui ouvre le blog. Si la police est absente, le navigateur utilisera la police par défaut définie dans le navigateur (généralement, c’est la police Times New Roman).

Pour éviter ces désagréments, il est conseillé d’utiliser les polices standard, celles qui se retrouvent couramment sur tous les ordinateurs c’est-à-dire, entre autres, Times New Roman, Arial, Verdana, Tahoma, Courrier New, etc.

Il est également possible de définir plusieurs polices. Cette option permet au navigateur d’utiliser des polices alternatives au cas où la police principale (la première de la liste) est introuvable. On pourra donc écrire

p { font-family : Arial, ‘Times New Roman’, Verdana ; }
  • Importer les polices

 

Il peut arriver que l’on ait envie d’utiliser une police qui n’est pas standard, et donc qui ne se retrouvera pas dans les ordinateurs de ses lecteurs. Pour régler ce problème, il suffit d’importer une police et de l’utiliser dans le blog.

Pour importer une police, il faut au préalable la choisir. Il existe des polices stockées en ligne auxquelles on peut accéder sur des plateformes comme Google Fonts à l’adresse https://google.com/fonts.

Google Fonts propose plusieurs polices regroupées en catégories. Après avoir choisi la police à utiliser en se servant de la barre de recherche ou bien en triant les polices selon les catégories disponibles, on peut l’importer dans le blog.

L’importation se fait en quelques étapes :

– Tout d’abord, il faut ajouter la police à sa collection en cliquant sur le bouton « Add to collection » juste en dessous de a police, à l’extrême droite.

Google Fonts - Ajouter une police à sa collection

– Ensuite, au bas de la page, il faut cliquer sur le bouton « Use » situé à l’extrême droite.

Google Fonts - Afficher le code d'importation

– Une page s’ouvre. Défiler vers le bas, jusqu’au box numéro 3 qui a pour titre, « Add this code to your website ». Cliquer sur l’onglet du milieu, « @import » et copier le code qui s’affiche dans le champ de texte. Pour la police Dancing Script par exemple, ce code apparait sous la forme suivante :

@import url(https://fonts.googleapis.com/css?family=Dancing+Script);

Google Fonts - Importer la police

C’est tout, vous êtes prêts à importer cette police dans votre blog.

  • Utiliser la police dans le blog

Retour à l’espace d’administration du blog. Une fois la fenêtre de gestion de CSS personnalisé (Custom CSS Manager) ouverte, on ajoute le code copié dans Google Fonts dans le champ de texte d’édition de CSS.

Custom CSS Manager - Appliquer le code

Quand c’est fait, il ne reste plus qu’à utiliser la propriété « font-family » pour l’appliquer à la balise qu’on souhaite personnaliser.

h1 { font-family : ‘Dancing Script’, cursive; }

Ce code applique la police « Dancing Script » à toutes les balises h1 présentes dans le blog. « Cursive » indique simplement une famille de polices. On peut aussi éviter de l’ajouter, sans aucun danger.

Remarquons que, au moment de l’importation, les espaces éventuels dans le nom de a police sont remplacés par le signe « + » (Dancing+Script).

  • « !important »

Dans certains cas, le CSS peur « refuser » d’appliquer une valeur que vous avez pourtant correctement attribuée à une balise. Ça peut arriver si une valeur différente a déjà été attribuée à la même propriété ailleurs dans le fichier CSS du blog. Pour indiquer au CSS quelle valeur est prioritaire, on doit lui ajouter le mot-clé important, précédé d’un point d’exclamation juste après cette valeur.

h1 { font-family : ‘Dancing Script’!important; }

/!\ Attention : N’utilisez ce mot-clé qu’en cas de nécessité…

Voilà, à présent vous pouvez facilement utiliser la police qui vous plaît dans votre blog. Bon codage ^^

Partagez

Auteur·e

willfonkam

Commentaires

laackater
Répondre

Merci. Mr. le professeur.