15 mai 2012

Comment ajouter des polices sur Canalblog avec Google Web Font

309656_10150310316682072_6191917071_7824838_73190_n

Dans ce tuto nous allons voir comment ajouter des polices un peu sympas sur son blog avec Google Web Font, parce qu'Arial et Times New Roman c'est pas tout le temps terriblement folichon.

1. Passer en mode Avancé

Il est absolument nécéssaire d'être en mode Avancé pour ajouter des polices donc si ce n'est pas déjà le cas, consultez ce tutoriel qui vous expliquera tout ça très bien avec des petites illustrations et tout. Attention par contre, une fois que vous avez changé de mode, impossible de retourner en arrière. C'est le prix à payer mais ne soyez pas effrayé, tout se passera bien... normalement.

2. Ajouter l'URL

Maintenant nous allons sur Google Web Font en cliquant ici pour trouver une police qui nous plait. Pour cet exemple je vais prendre Amatic SC qui est la police que j'utilise pour les titres d'articles.

On retourne ensuite sur Canalblog pour ajouter notre police. Cliquez sur l'onglet Apparence puis Editer les fichiers de ce modèle et enfin, dans le menu déroulant, sélectionnez Page d'accueil. Apparait alors du superbe code HTML à la mise en page bien moche mais bref, passons... Sous la bannière on va alors ajouter une ligne du type :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=nom_de_la_police">

Il y a une petite subtilité à connaître cependant sur le nom des police à mettre ici : les majuscules sont à respecter et les espaces sont à remplacer par un "+". Donc, pour ma police Amatic SC dont je vous parlez tout à l'heure, j'aurai :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Amatic+SC">

Pour rajouter de nouvelles polices, il suffit de les séparer par un "|". Par exemple, pour la police Cedarville Cursive que j'utilise dans cet article, j'obtiendrai :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Amatic+SC|Cedarville+Cursive">


3. Appliquer la police à une classe

Dans le menu déroulant, sélectionnez Feuille de générale. Modifiez alors la valeur du font-size associé à la classe que vous souhaitez modifier (en gros à une zone de texte choisie), mais gardez au moins une police alternative standard au cas où la police n'ait pas été chargée correctement.

font-family: 'Amatic SC', Courier;

Et voilà c'est gagné!

Si vous voulez en savoir un peu plus, je vous recommande cet article sur lequel je me suis basée pour écrire ce tuto.