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.


  • Bonjour,
    Merci pour ce ptit tuto très bien expliqué. Tout marche correctement sur la page d'accueil mais pas pour les suivantes ? Tu as une solution ?
    Merci

    JESSY

    Posté par martinjessy, 23 mars 2013 à 11:41 | | Répondre
    • Salut Jessy,

      Hum oui c'est "normal" que ça ne marche que sur la page d'accueil... En fait c'est une erreur de ma part, j'ai oublié de mentionner qu'il fallait ajouter les polices aux autres pages du blog. Oups.

      Tu pourras accéder aux différentes pages grâce au menu déroulant lorsque tu es dans "Éditer les fichiers de ce modèle" et tu n'auras plus qu'à réaliser les même modifications que sur ta page d'accueil.

      J'espère que ça t'aideras!

      Posté par TheShoeLessGirl, 24 mars 2013 à 16:40 | | Répondre
  • 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.

    Posté par La_petite_M, 29 mars 2013 à 13:21 | | Répondre
    • Ce post est un peu vieux et en le relisant suite à tes remarques je me rends compte qu'il n'est pas toujours très rigoureux... Je devrais vraiment le remettre à jour.

      Pour revenir à ton problème, le lien doit simplement se trouver dans l'en tête de ta page, c'est à dire entre les balises et .

      Posté par TheShoeLessGirl, 29 mars 2013 à 18:40 | | Répondre
  • 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

    Posté par La_petite_M, 29 mars 2013 à 19:17 | | Répondre
    • Arf mon message est mal passé, je voulais te dire d'ajouter le lien entre les balises < / head > et < head > .
      Si ça ne marche toujours pas, envoie moi une de tes pages par mail, j'y jetterai un oeil ;) .

      Posté par TheShoeLessGirl, 30 mars 2013 à 12:30 | | Répondre
  • 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 !!! :)

    Posté par La_petite_M, 07 avr. 2013 à 11:06 | | Répondre
  • 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

    Posté par indienagawika, 22 juin 2013 à 22:06 | | Répondre
  • Merci pout ton tuto très clair. Il faut juste savoir à quel type de texte correspond toutes les catégories du code avancé.

    Posté par DrMarion, 10 sept. 2013 à 12:33 | | Répondre
Nouveau commentaire