Comment ajouter des polices sur Canalblog avec Google Web Font

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.

Comments

[DrMarion]

Merci pout ton tuto très clair. Il faut juste savoir à quel type de texte correspond toutes les catégories du code avancé.

[indienagawika]

Merci pour le tuto !

je le trouve bien expliqué, mais pourtant je n'arrive pas à changer la police des titres de mes messages. J'ai rentré le code de la police comme tu l'expliques. puis je l'ai appliqué à blogbody h3, ça ne marche pas (ça ne modifie ni la taille ni la police, malgré mes modifs), alors que ça a marché pour mes catégories... J'ai oublié un truc en route ? Merci encore

[La_petite_M]

Merci c'est super gentil de prendre le temps de m'expliquer, je pense avoir compris, pour le moment je reste en module simple car je n'ai pas fini la mise en page de mon blog mais dès que ce sera fait je passerais en module avancé pour retenter, merci encore !!! :)

[La_petite_M]

Je viens de déplacer le lien, je pense l'avoir bien mis mais cela ne fonctionne pas ... pourtant il me semble avoir suivi la procédure que tu indiques ...

Je n'ai même pas regardé la date de ton post, je l'ai trouvé clair et facile d'accès :) c'est moi qui ne dois pas être très douée ... :s

[La_petite_M]

Bonjour, merci pour ces explications mais malheureusement je n'y arrive pas, j'aimerais que cette police soit utilisable pour écrire mes messages, j'ai bien mis le css dans les différents endroits que vous avez indiqué ... à quel endroit mettez vous le lien ? vous avez indiqué après la bannière mais sachant que mon blog est tout récent il n'a pas encore de bannière (je suis en train d'en créer une).

Merci d'avance pour l'aide que vous pourrez m'apporter.