Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Utiliser des polices Google Fonts sur Blogger
Cet article à été mis à jour en Septembre 2016
Qui n'a pas eu envie de changer la police d'un titre sur son blog mais s'est retrouvé avec un choix réduit à Arial, Times New Roman, Helvetica ou autre police standard du web ?

Et bien sachez qu'il existe des centaines d'autres polices prêtes à être utilisées et qui ne souhaitent que s'installer sur votre blog !

Google Fonts est un site web qui propose, de manière totalement gratuite, une bibliothèque de polices à utiliser sur son blog ou son site web.

Utiliser des polices Google Fonts sur Blogger

Sommaire

  1. Sélectionner une police
  2. Ajouter la police sur Blogger
  3. Modifier la police sur votre blog
  4. Message d'erreur lors de la sauvegarde
  5. Sélections de polices Google Fonts

Tout d'abord il faut aller sur le site de Google Fonts et choisir une police.

Le site propose tout type de police : serif, sans serif, écriture manuscrite, etc. A vous de choisir ce qui vous plaît !

Utiliser des polices Google Fonts sur Blogger

A gauche de la page vous trouverez un aperçu des différentes polices.
A droite, vous trouverez des options de recherche. Vous pouvez sélectionner les catégories de polices qui vous intéressent, les langues disponibles, l'épaisseur, etc.

Sélectionner une police

Dans cet exemple je vais utiliser la police Josefin Slab. Pour sélectionner une police, cliquez sur le bouton rouge en haut à droite de la police, comportant un signe +

Utiliser des polices Google Fonts sur Blogger

Une boîte noir apparaît en bas de la page. Cliquez sur la boîte pour l'ouvrir :

Utiliser des polices Google Fonts sur Blogger

Copiez le code qui se trouve sous Standard. C'est le code qui va permettre d'ajouter la police à votre blog.

Utiliser des polices Google Fonts sur Blogger

Ajouter la police sur Blogger

Pour ajouter votre police Google Fonts sur Blogger, allez sur votre tableau de bord. Cliquez sur Modèle, puis sur Modifier le code HTML :

Utiliser des polices Google Fonts sur Blogger

Cliquez dans la boîte de code. Puis appuyez sur Ctrl et F en même temps (Cmd et F sur Mac).

Un champ de recherche doit apparaître en haut à droite de la boîte de code. Si ce n'est pas le cas, s'il s'affiche en haut de la page web, alors recommencez en cliquant bien à l'intérieur de la boîte de code !

Dans le champ de recherche collez :
</head>
Appuyez sur Entrer et vous serez dirigé vers cette ligne dans votre code.

Au-dessus de cette ligne, collez le code de votre police que vous avez copié de Google Fonts. Dans mon exemple, ce code est :
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet">
Attention ! Détail très important : avant le signe > à la fin de la ligne de code ajoutez / comme ceci :
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet"/>
Si vous ne faites pas cette étape, un erreur s'affichera lors de la sauvegarde du thème. Si l'erreur s'affiche vérifiez que vous avez bien rajouté le signe /


Utiliser des polices Google Fonts sur Blogger

Modifier la police sur votre blog

Maintenant que vous avez ajouté la police à votre blog, il faut changer la police de l'élément que vous voulez modifier (titre, texte, etc.).

Pour trouver le code à utiliser, retournez sur la page Google Fonts. Copiez le code qui se trouve sous Specify in CSS :

Utiliser des polices Google Fonts sur Blogger

Ce code CSS définit la police d'un élément.

Maintenant il faut modifier le code CSS correpondant à l'élément à modifier. Pour les titres des articles, si vous avez déjà suivi ce tutoriel alors retrouvez le code commençant par :
h3.post-title {
Ajoutez le code CSS donné par Google Fonts avant le signe } de ce code CSS. Par exemple :
h3.post-title {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 22px;
    font-family: 'Josefin Slab', serif;
}
Pour trouver les codes CSS pour modifier d'autres éléments du blog, je vous laisse découvrir mes autres tutoriels ;)

Message d'erreur lors de la sauvegarde

Si vous obtenez un message d'erreur lors de la sauvegarde de votre thème, vérifiez que vous avez bien rajouté le signe / lors de cette étape ;)

Sélections de polices Google Fonts

Pas envie de chercher une police pendant des heures ? Voici quelques sélections et associations de polices Google Fonts pour vous :

Autres articles

56 commentaires:

  1. Merci pour ce tuto, c'est très utile! Mais par contre ce qui est embêtant, c'est que toutes les polices que j'ai trouvé sympa n'avaient pas suffisamment de lettres avec accents... Pas de "é", "è" ou "à" par exemple. C'est gênant pour la rédaction en français...

    RépondreSupprimer
    Réponses
    1. Bonjour Emmy,
      Effectivement, toutes les polices ne sont pas compatibles avec les accents.
      Si tu souhaites chercher les langues compatibles tu peux le définir dans les paramètres de recherche sur la droite de la page : Sous Languages sélectionne Latin Extended ;)

      Supprimer
  2. Bonsoir,
    Merci pour vos tutos mais je cale sur deux (voire trois problèmes peut être mineurs pour vous).
    1)Quel est le code CSS pour changer la police d'un texte ? Est-ce h4 quelque chose ou...
    2)Quel est le code pour mettre en couleur le fond d'un gadget ?
    Et(si c'est possible) peut-on importer une image pour le fond de l'arrière plan principale (article).
    Merci d'avance (cela me permettra de peaufiner mon blog d'auteur de thriller auto édité)

    RépondreSupprimer
    Réponses
    1. Bonjour Liccaeus,
      Pour changer la police du texte des articles, il faut utiliser le code CSS suivant :

      .post {
      }

      Pour modifier la couleur de fond de tous les gadgets, il faut utiliser le code CSS suivant :

      aside .widget {
      }

      Par contre pour modifier le fond d'un seul gadget, il faut trouver son nom. Pour cela va dans Mise en Page. Clique sur Modifier sur le gadget en question. Dans la barre d'adresse en haut de la fenêtre qui s'ouvre, cherche la fin de l'url. Tu devrais trouver quelques chose comme :

      widgetId=HTML5

      Tout ce qui se trouve après widgetId= est le nom du gadget.
      HTML est le type de gadget et 5 est le nombre du gadget. Dans mon exemple j'ai HTML5, c'est mon 5e gadget HTML/JavaScript.

      Pour cibler précisément ce gadget il faut ajoute #HTML5 en début de code CSS comme ceci :

      #HTML5 {
      }

      Pour ajouter une image de fond à tes articles tu peux utiliser :

      .post {
      background-image: url('URLDELIMAGE');
      background-repeat: repeat; /* no-repeat = image non répété ; repeat = image répété */
      background-size: cover; /* cover = image étirée ; contain = l'image ne dépassera pas les bords ; initial = taille original de l'image */
      }

      Remplace URLDELIMAGE par l'adresse URL de ton image.

      Supprimer
  3. Kikou miss, encore une fois merci pour tes astuces.
    Par contre, puis-je te demander, je n'arrive pas à changer la police, pour mes articles, en effet, blogger, n'en propose que 5, je crois, et j'aimerais changer ceci.
    Pourrais-tu me dire, comment faire stp, je n'ai pas trouvé sur le blog :(.
    je te remercie beaucoup Aly

    RépondreSupprimer
    Réponses
    1. Bonjour Aly,
      Tu peux modifier les polices de tes articles en modifiant le code CSS de ton blog. En écrivant tes articles dans l'éditeur de texte Blogger tu ne verras pas de différence, mais dans l'aperçu et une fois publié, le texte des articles prendra bien la nouvelle police.
      Pour modifier la police du texte des articles utilise le code CSS suivant :

      .post-body {
      }

      Ajoute le code pour la police donné par Google Fonts avant le signe } de ce code CSS ;)

      Supprimer
  4. Bonjour,

    J'ai réussit à modifier la police des articles avec ton tuto. Cependant, j'essaie aussi de modifier la police de ma barre de navigation. J'ai entré le code suivant qui ne fonctionne pas :
    #PageList1{
    font-family: 'Quicksand', sans-serif;
    }
    Pourtant je suis dans le bon élément car j'ai fait un test avec background-color : red;
    Merci pour tous ces tutos ^^

    RépondreSupprimer
    Réponses
    1. Bonjour Céline,
      Les textes de ton menu sont des liens, il faut rajouter a avant le signe { comme ceci :

      #PageList1 a {
      font-family: 'Quicksand', sans-serif;
      }

      Et voilà ;)

      Supprimer
  5. Bonjour Catherine et Mille mercis pour ce blog qui est une vraie mine ! Je souhaitais faire la modification de la police pour les articles mais je ne trouve pas le code .post-body {
    }. Merci d'avance pour ton aide ! http://jarrete-demain.blogspot.com/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Si tu ne le trouves pas, rajoute-le avant la ligne suivante de ton thème :
      ]]></b:skin>

      Supprimer
    2. Bonjour Catherine, merci de ton aide précieuse ! J'essaie de suite !

      Supprimer
  6. Bonjour Catherine,
    j'espère que tu vas bien, merci bcp pour ces tutos qui nous aide bcp a personnaliser nos blogs (surtour pour nous qui ne connaissons rien à l'informatiques). Alors voila, j'ai bien intégrer la police choisie a mon blog, cependant je ne connais pas le code pour pouvoir modifier le titre de mes gadgets, merci de m'aider

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Si tu souhaites modifier l'apparence de tous les titres des gadgets d'une barre latérale, alors tu peux utiliser :

      aside .widget h2 {
      /* Ajoute le code pour la police ici */
      }

      Ajoute ce code CSS avant la ligne suivante de ton thème :

      ]]></b:skin>

      Si tu souhaites modifier le titre d'un gadget spécifique, il faut trouver le nom du gadget. Pour cela va dans Mise en page, clique sur Modifier sur le gadget en question.
      Dans la barre d'adresse de la fenêtre qui s'ouvre, va à la fin de l'adresse. Tu trouveras quelque chose comme ceci :

      widgetId=HTML1

      Le nom du gadget se trouve après widgetId=, soit dans mon exempl : HTML1. Selon le gadget en question, HTML1 sera différent pour toi.

      Pour cibler ce gadget en particulier, il faudra utiliser le code CSS suivant :

      #HTML1 h2 {
      /* Ajoute le code pour la police ici */
      }

      Remplace HTML1 par le nom de ton gadget en laissant le # devant. De même, colle ce code avant al ligne :

      ]]></b:skin>

      Supprimer
  7. Bonjour Catherine !

    Je ne sais pas s'y ça viens de la police, mais je viens tout juste de remarqué quelque chose d'étrange.
    Je viens d'installer une police sur blogger. J'ai bien rajoutée le /.
    Mais quand j'ai voulu vérifiée dans un article s'y elle était bien là.

    Je n'ai plus d'aperçu, ça me met
    "Failed to load a preview page. Please click preview button again.

    Error 500"

    C'est pareil quand je veux visualiser mon blog dans "Personnalisée"
    Ca me met ça
    Oups ! Il s'agit d'une erreur.

    Nous vous prions de bien vouloir nous excuser pour les désagréments occasionnés.

    Essayez d'actualiser la page pour voir si le problème est résolu.

    Si le problème n'est toujours pas résolu, nous vous conseillons :

    Videz le cache et supprimez les cookies de votre navigateur, puis réessayez.
    Déterminez si d'autres personnes rencontrent le même problème : recherchez le code d'erreur bX-oob09l dans le groupe d'aide de Blogger.

    De plus, impossible d'allée dans les paramètres "Avancé" pour changer la police de font d'accueil.

    Je ne sais pas si tu as une idée. Si tu peux m'aider..
    Merci beaucoup en tout cas pour tout tes tutoriels, je m'en sert toujours !

    Merci beaucoup,
    Pauline.

    RépondreSupprimer
    Réponses
    1. Bonjour Pauline,
      Il arrive que Blogger rencontre des problèmes. Généralement ils sont résolus rapidement ou en quelques jours. Il n'y a pas grand chose à faire à part attendre que Blogger résolve le problème de son côté. Est-ce que ça remarche ? Si non, alors il faut contacter Blogger.

      Supprimer
  8. Bonjour,
    Actuellement,je n'ai pas d'ordinateur,je fais tout sur ma tablette or je ne sais pas comment je peux ajouter les polices parce que je n'ai pas le bouton CTRL...

    RépondreSupprimer
    Réponses
    1. Bonjour Nora,
      Selon la marque de ta tablette, il devrait y avoir une fonction de recherche dans le navigateur.
      Si tu ne le trouves pas je te conseil d'utiliser un ordinateur car la manipulation des codes sera beaucoup plus simple à réaliser.

      Supprimer
  9. Bonjour Catherine,
    Désolée de te déranger, j'aurais aimé savoir comment faire pour modifier la police d'écriture du titre du blog. Je cherche partout sur ton blog mais je n'arrive pas spécialement à trouver. Je me suis arrêtée à l'étape avant de coller le code CSS puisque je ne sais pas où le mettre...
    Merci beaucoup d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour Ambre,
      Pour changer l'apparence du titre du blog trouve le code CSS commençant par :

      .Header h1 {

      Remplace la ligne commençant par :

      font:

      Par le code donné par google fonts.
      Il faudra également ajouter la ligne suivante pour définir la taille du texte :

      font-size: 60px;

      Remplace 60px par la taille qui te convient ;)

      Supprimer
  10. Bonjour Catherine

    Merci beaucoup pour le tuto, par contre j'ai beau avoir suivi à la lettre (me semble-t-il !), je ne parviens pas à modifier la police de mon texte.

    J'ai bien fait la 1ère étape, à savoir coller le 1er lien juste avant "head" en rajoutant bien le signe /, puis coller le 2 lien (CSS) au niveau de post.body, avant que la parenthèse ne se referme, et cela ne me donne rien.

    Merci par avance de ton aide....

    RépondreSupprimer
    Réponses
    1. Bonjour Ariane,
      Peux-tu me donner le lien de ton blog pour que je puisse voir le problème ?

      Supprimer
  11. Bonsoir !
    Tout d'abord merci pour ton blog il est géniale et je sens qu'il va pas mal m'aider prochainement :)
    j'ai un petit soucis pour modifier la police de mon titre, je ne trouve pas ce code
    h3.post-title
    je ne trouve que celui là
    h3.post-title, .comments h4 {
    je ne comprend pas là où ça bloque, tu peux peut être m'aider stp ?
    merci beaucoup

    RépondreSupprimer
    Réponses
    1. Bonjour Précillia,
      Le code CSS commençant par :

      h3.post-title, .comments h4 {

      Regroupe les titres des articles et le titre des commentaires. Tu peux cibler spécifiquement les titres de tes articles en ajoutant :

      h3.post-title {
      }

      Après le signe } du code commençant par :

      h3.post-title, .comments h4 {

      Ajoute au nouveau code CSS les paramètres que tu souhaites modifier (police, taille de la police, etc.), avant le signe } comme ceci :

      h3.post-title {
      font-family: Arial;
      }

      Supprimer
  12. Bonjour Catherine ! J'espère que tu vas bien !
    Je voulais savoir si tu savais pourquoi la police de mes articles et et de ma barre de droite n'est pas celle que j'ai choisie ? J'ai beau chercher je n'arrive pas à remettre " font-family: 'Lato', sans-serif; ".
    Tu aurais une idée lumineuse ?

    www.m-art-rion.blogspot.ch

    Merci infiniment !

    RépondreSupprimer
    Réponses
    1. Bonjour Marion,
      Tout d'abord il y a des erreurs dans ton code. Tout ce qui suit le code CSS :

      /* Boutons de la barre de cookies au survol de la souris */
      .cookie-choices-buttons a:hover, #cookieChoiceInfo a:hover {
      background-color: #ffffff; /* Couleur de fond */
      color: #f6aef2; / * Couleur de la police */
      }

      N'est pas, ou mal pris en compte, car le code CSS qui le suit n'est pas fermé (il manque le signe } à la fin) :

      /* Apparence des titres de la barre latérale de droite */
      .column-right-inner h2 {
      font-family: 'Coming Soon', cursive;
      font-size: 14px;
      text-transform: uppercase;
      color: #96dae1;
      text-align: center;
      border-bottom: solid;
      border-bottom-width: 1px;
      border-bottom-color: #f6aef2;
      padding-bottom: 6px;
      margin-bottom: 20px;
      /* Apparence globale du gadget */
      #Label1 {
      background: #999999; /* Couleur de fond */
      padding: 20px 20px 20px 20px; /* Marge à l'intérieur du gadget : haut droite bas gauche */
      }

      Ajoute le signe } avant la ligne :

      /* Apparence globale du gadget */

      Comme ceci :

      /* Apparence des titres de la barre latérale de droite */
      .column-right-inner h2 {
      font-family: 'Coming Soon', cursive;
      font-size: 14px;
      text-transform: uppercase;
      color: #96dae1;
      text-align: center;
      border-bottom: solid;
      border-bottom-width: 1px;
      border-bottom-color: #f6aef2;
      padding-bottom: 6px;
      margin-bottom: 20px;
      }
      /* Apparence globale du gadget */
      #Label1 {
      background: #999999; /* Couleur de fond */
      padding: 20px 20px 20px 20px; /* Marge à l'intérieur du gadget : haut droite bas gauche */
      }

      Tu peux supprimer le code commençant par :

      /* Apparence des titres de la barre latérale de droite */
      .column-right-inner h2 {

      Car il est déjà présent plus haut dans ton code. On obtient :

      /* Apparence globale du gadget */
      #Label1 {
      background: #999999; /* Couleur de fond */
      padding: 20px 20px 20px 20px; /* Marge à l'intérieur du gadget : haut droite bas gauche */
      }


      Ensuite, avant la ligne :

      ]]></b:skin>

      Tu as :

      }/* Apparence des titres de la barre latérale de droite */
      .column-right-inner h2 {
      font-family: 'Coming Soon', cursive;
      font-size: 14px;
      text-transform: uppercase;
      color: #0fb0bb;
      text-align: center;
      border-bottom: solid;
      border-bottom-width: 1px;
      border-bottom-color: #f6aef2;
      padding-bottom: 10px;
      margin-bottom: 20px;
      }/* Apparence des titres de la barre latérale de droite */
      .column-right-inner h2 {
      font-family: 'Coming Soon', cursive;
      font-size: 0px;
      text-transform: uppercase;
      color: #0fb0bb;
      text-align: center;
      border-bottom: solid;
      border-bottom-width: 1px;
      border-bottom-color: #f6aef2;
      padding-bottom: 10px;
      margin-bottom: 20px;
      }

      Supprime ces codes car ils sont déjà présents en ne font qu'entrer en conflit avec les autres. Maintenant tu peux modifier l'apparence des titres de tes gadgets en cherchant le code CSS commençant par :

      /* Apparence des titres de la barre latérale de droite */
      .column-right-inner h2 {

      Qui se trouve plus haut dans ton code.
      Remplace la valeur à la ligne :

      font-family: 'Coming Soon', cursive;

      Pour finir, pour modifier la police des titres de tes articles retrouve ce code CSS :

      h3.post-title {
      font-family: 'Coming Soon', cursive;
      font-weight: 100;
      font-size: 18px;
      font-weight: 400; /* Epaisseur de la police du titre */
      color: #0fb0bb;
      padding-top: 5px;
      padding-right: 0;
      padding-bottom: 5px;
      padding-left: 0;
      border-bottom-width: 1px; /* Epaisseur de la bordure */
      border-bottom-style: solid; /* Style de la bordure : solid = solide | dashed = en tirets | dotted = en pointillés */
      border-bottom-color: #f6aef2; /* Code couleur de la bordure */
      }

      Supprimer
  13. Bonjour Catherine ,

    Moi aussi j'ai le même problème qu'Ariane sauf que c'est au niveau du changement de la police du titre de mon blog . J'ai seulement vu un changement de la taille du texte quand j'ai inséré le code pour la police mais c'est tout . Aurais-tu quelque chose qui puisse nous aider ?

    Mon blog : https://lensandforks.blogspot.com/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      As-tu réglé le problème ? Car la police de ton titre est Tangerine :)

      Supprimer
  14. Bonjour ! Merci pour tous tes tutos ! J'ai un souci avec celui-ci, j'ai bien inséré le code html, mais je ne trouve pas la ligne h3.post-title { dans le code du blog, et du coup je suis coincée.. JE souhaite changer les polices des titres d'article.
    Ma deuxième étape serait d'ajouter une autre polie Google Font pour changer la police des articles et autres (changer tout ce qui est actuellement en Arial), saurais-tu m'aider s'il te plait ?

    Merci, Bertille !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Si tu n'as jamais changé l'apparence des titres des articles tu peux suivre ce tutoriel pour créer le code CSS spécifique aux titres des articles ;)

      Supprimer
  15. Bonjour,

    J'ai ajouté la police choisi dans le code HTML, mais j'aimerais changer la police de texte. J'ai donc ajouter ".post-body {
    font-family: 'Raleway', sans-serif;
    }" dans le CSS mais ca ne donne rien

    Dans ma boite CSS j'ai donc "h3.post-title {
    margin: 15px 0 15px 0;
    }
    .post-body {
    font-family: 'Raleway', sans-serif;
    }"

    http://cactusfleuricreation.blogspot.fr/

    Cordialement (:

    RépondreSupprimer
    Réponses
    1. Bonjour,
      As-tu écris ton article directement dans l'éditeur de Blogger ou as-tu utilisé un logiciel de type Word pour l'écrire ? Car la police est définie comme Verdana directement dans le contenu de l'article.
      Je te conseil d'écrire ton article directement dans Blogger.

      Pour corriger ce problème, tu peux aller sur la page de création/modification de ton article. Sélectionne tout le contenu de l'article, coupe-le et colle-le dans un fichier Notepad ou Word pour le moment.
      Retourne sur ton article et clique sur le bouton HTML à gauche de l'écran. S'il reste du code ici, supprime-le.
      Clique sur le bouton Rédiger à gauche de l'écran et colle le contenu de ton article ici en faisant clique droit avec la souris, puis en sélectionnant Coller en texte brut (ou Ctrl + Maj + V sur PC).
      Maintenant tu peux sauter des lignes et mettre en forme des titres avec les outils de l'éditeur Blogger.

      Supprimer
  16. Intéressant cet article ! Je souhaite depuis quelques temps changer la police du nom de mon blog mais je ne trouve pas de tuto. Malheureusement pour moi, je vois que tu ne parles pas de wordpress... =(

    RépondreSupprimer
    Réponses
    1. Bonjour Victoria,
      Oui, tous mes articles sont basés sur Blogger.
      Tu devrais pourtant pouvoir installer Google fonts sur Wordpress. Il doit exister des extensions. Si tu utilises un thème construit sur Genesis alors tu peux coller le code pour la police Google Fonts sur la page Genesis > Theme Settings. Sous Header and Footer Scripts tu peux coller le code dans la boîte à droite de Header scripts.
      Ensuite tu peux changer la police de ton titre avec du CSS. Le code pour ton titre va dépendre de ton thème, Mais tu devrais pouvoir cibler ton titre avec le code CSS suivant :

      h1 {
      }

      Tu peux ajouter des codes CSS à ton thème Sous Apparence > Modifier le CSS.

      Supprimer
  17. Bonjour

    J'ai fait pas mal de tutoriels de votre blog, mais celui-ci je bloque, je ne trouve absolument pas le h3.post-title { peut être que je l'ai supprimé par erreur? J'ai sauvegardé mon blog récemment, donc je pense pas retrouve ce titre :/ De même il m'indique uniquement le h3.post-title { pour mobile.
    Auriez-vous une solution?

    RépondreSupprimer
    Réponses
    1. Bonjour Audrey,

      Si tu n'as jamais changé l'apparence des titres des articles directement dans le code de ton thème alors c'est normal. Tu peux suivre ce tutoriel pour créer le code CSS spécifique aux titres des articles ;)

      Supprimer
  18. Bonjour Catherine,

    Un grand merci pour toutes tes astuces !! J'ai décidé de refaire une mise à neuve de mon blog et je découvre ton blog avec bonheur. J'ai téléchargé sur mon blog une police que j'aime bien mais comment l'appliquer au texte de mes posts ?

    RépondreSupprimer
  19. Hello Catherine,
    Je me tourne vers toi de nouveau désolé. J'ai collé le code de google font : (Montserrat)

    à l'emplacement indiqué dans les commentaires, avec le fameux / :

    Avant ]]>

    et après .post { juste avant le }

    Mais la police n'a pas changé ... Peux-tu m'aider s'il te plait ?

    RépondreSupprimer
    Réponses
    1. Bonjour Cristie,
      Vérifie que tu as bien collé le code de Google Fonts avant la ligne :

      </head>

      Et non :

      ]]></b:skin>

      Supprimer
    2. Merci pour ta réponse !
      Je l'ai fait mais ma police n'est pas uniformisé sur mon blog. A en perdre son latin.
      Si tu as une explication je prends ! :-)
      Merci pour toutes ces astuces mais surtout les explications qui les accompagnent ... Tu es une vrai mine !

      Supprimer
    3. Bonjour Cristie,
      Il semblerait que tu aies un formatage dans certains de tes articles. Va sur les articles qui comportent le problème. Sélectionne tout le texte et clique sur l'outil Supprimer la mise en forme représenté par un T sous-ligné avec une croix rouge en bas à droite du T. Maintenant tu peux remettre en forme les Titres, textes en gras en italique, etc.

      Supprimer
    4. Bonjour Catherine,

      Merci cela a marché ! You're the best !

      Supprimer
  20. Bonjour Catherine,

    C'est toujours un réel plaisir de mettre en application tes tutoriels même si il s'agit parfois d'un casse tête comme maintenant....

    J'ai mis en place une grande partie de tes tutoriels mais je crois avoir cafouillé quelque part.

    La police de mes articles qui initialement est Arial, taille normale, apparaît en gras et en grande taille. J'ai beau chercher, je n'arrive pas à voir d'où vient le problème.

    Je te remercie d'avance pour ton aide.

    Marine https://lepuydeslivres.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Marine,
      Il me semble que tu as réglé le problème ?
      Il y a tout de même une erreur dans ton code CSS :

      .post-body {
      font-size: 85%;
      line-height: 1.4;
      position: relative;
      font-family : 'Satisfy;
      color: ##798081;
      }

      D'après ce code, la police de tes articles est Satisfy. De plus, il manque le signe ' à la fin de Satisfy, et il y a un # en trop dans le code couleur.

      Supprimer
  21. Bonjour,
    j'essaie de changer ma police mais rien n'apparaît !

    J'ai bien tout respecté pourtant... aucun changement de Police !

    RépondreSupprimer
    Réponses
    1. Bonjour Anaïs,
      Peux-tu me donner le lien de ton blog ? Et me dire quelle police tu souhaitais ajouter ? ;)

      Supprimer
  22. Bonjour Catherine,

    Je suis en pleine refonte de mon blog et je me base uniquement sur tes tutos, ils sont très biens faits et vraiment clairs :)

    J'ai un problème pour régler la taille de la police. J'ai modifié mon H1 comme il faut, mais lorsque je modifie la taille sur font-size, sa agrandit seulement l'espace entre le H1 et les paragraphes au-dessus et en-dessous... Et le titre garde la même taille. As-tu une solution s'il te plaît ?

    Merci d'avance,

    Juliette

    RépondreSupprimer
    Réponses
    1. Bonjour Juliette,
      Modifier le font-size ne devrait pas changer l'espace autour du titre. Vérifies qu'il n'y a pas d'erreur dans ton codes CSS, qu'il ne manque pas un des signe suivants, ou qu'il n'y en ai pas un en trop :

      { : ; } /* */

      Supprimer
  23. Bonjour, je n'arrive pas à modifier le titre de mon blog, il est en gadget mais quand je suis ce qui est indiqué, la police s'est mise en gras et pas en attaché (comme ma police). Pourtant, ça a fonctionné pour le titre de mes articles mais pas pour celui du blog en général.

    Ca m'a changé la police de mon titre mais pas avec la police que j'ai choisie...

    PS : J'ai essayé de trouver h3.post-title { sur mon codage mais il n'y est pas. Peut-être que je n'ai pas fait au bon endroit mais je ne vois pas du tout où ça peut aller d'autre ?

    Merci d'avance, Maïlys. :)

    RépondreSupprimer
    Réponses
    1. Bonjour Maïlys,
      Par défaut tu ne dois pas pouvoir trouver le code commençant par h3.post-title { dans ton code. Mais tu peux le rajouter avant la ligne suivante :

      ]]></b:skin>

      Rajoutes ceci :

      /* Titre des articles */
      h3.post-title {
      }

      Pour le titre de ton blog il faut utiliser ce code CSS :

      /* Titre du blog */
      .Header h1 {
      }

      De même, ajoutes ce code avant la ligne ]]></b:skin>

      Supprimer
  24. Bonjour Catherine, et merci pour toutes les fois où tu m'as aidée ! J'ai une question que je ne savais pas trop où poser : j'ai modifié le design de mon blog, et je ne parviens pas à avoir la même écriture sur ma version mobile que sur ma version web, à la fois pour le texte des articles et pour leur titre. Ci-joint le lien de mon blog : www.unjolicoupdefourchette.com. Merci beaucoup par avance de tes conseils !

    RépondreSupprimer
    Réponses
    1. Bonjour Ariane,
      C'est normal que l'apparence soit différente sur mobile car la version mobile est indépendante de la version web.
      Pour modifier les polices sur la version mobile, il faut ajouter de nouveaux codes CSS avec .mobile au début du code. Certains éléments ont un code HTML différent de la version web, comme par exemple les titres des articles. Pour modifier ces titres il faut utiliser le code CSS :

      h3.mobile-index-title {
      }

      A ajouter avant la ligne :

      ]]></b:skin>

      Si la police ne s'affiche pas, elle n'est peut-être pas adaptée pour les mobiles. Dans ce cas, essaie une autre police.

      Supprimer
  25. Bonjour j'ai télécharger un thème en ligne, et j'applique tout ce que vous dites mais rien n'y fait ça ne fonctionne pas ni les titre ni les texte ne change de police, y'a t-il eu une mise a jours ? Comment faire je suis désespéré après deux jours entier à essayer encore et encore

    RépondreSupprimer
  26. Bonjour,
    La première étape tout vas bien mais dans la deuxième, je n'est pas de "h3.post-title {" dans les codages
    J'ai uniqueme
    - <h3 class='post-title entry-title (et ce qu'il y à après ne ressemble à rien du text que vous avez)
    ou
    - .h3, h3 {
    font-family: "Pontano Sans, sans-serif;

    Mais lorsque j'apporte les changement rien ne change ...

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Si tu as téléchargé un thème pour Blogger c'est normal que mes tutoriels ne fonctionnent pas car les thèmes téléchargés ont une structure différente des thèmes classiques de Blogger. Tous mes tutoriels sont basés sur le thème Simple de Blogger ;)

      Par contre si tu trouves un code qui commence par :

      <h3 class='post-title entry-title

      Tu devrais pouvoir utiliser ce code CSS pour les titres des articles :

      h3.post-title {
      }

      Ajoutes-le avant la ligne suivante de ton thème :

      ]]></b:skin>

      Si en changeant la police, rien ne change tu peux forcer la prise en charge de la police en ajoutant !important avant le signe ; comme par exemple :

      h3.post-title {
      font-family: 'Josefin Slab', serif !important;
      }

      Supprimer
  27. Bonsoir Catherine, à nouveau merci de ta réponse. N'étant pas vraiment douée, puis-je te demander d'être plus explicite ? Le titre de mes articles doit être dans la police "Dancing Script" et mes articles dans la police "coming soon". Peux-tu me dire exactement quelles lignes de codes je dois rajouter avant ]]> ?
    En te remerciant par avance

    RépondreSupprimer
    Réponses
    1. Bonjour Ariane,
      Pour modifier l'apparence des titres des articles sur mobile utilise le code CSS suivant :

      h3.mobile-index-title {
      }

      A ajouter avant la ligne :

      ]]></b:skin>

      Le corps de texte devrait bien prendre la police que tu as déjà défini (Coming Soon) mais ce n'est pas le cas.
      En regardant de plus près ton code, je ne vois pas les codes Google Fonts qui permettent d'installer les polices sur ton blog. Peut-être que les polices ne s'affichent pas sur la version mobile pour cette raison.
      Cherches les polices Dancing Script et Coming Soon sur Google Fonts et installes-les sur ton blog en suivant les étapes au début de ce tutoriel ;)

      Supprimer

Le blog est officiellement en PAUSE. Je ne pourrai PAS répondre à vos commentaires. Pour plus d'infos.

Vérifiez que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger