Google Web Fonts is a biggest treasure of awesome fonts but many bloggers doesn't know how to use Google Web Fonts in Blogger.Many of them may not heard about them.You can add and use Google Web Font in your blog very easily.Here I am giving some easy steps just follow them carefully and you can successfully use them in your blog.




How To Use Google Web Fonts In Blogger ?


Here are some simple steps to use Google Web Fonts In Blogger

  1. Choosing the font from Google Web Fonts.
  2. Getting the code for the font which you have choosed adding the it in template.
  3. Adding the CSS code.

1.Choosing The Font


To choose the specific web font go to Google Web Font Page and choose a font which like accross 444 fonts.


2.Getting The Code For Font


After choosing a font click on Quick Use button on right side of that box and scroll down th(See Image Below)

(Note: I have chosen Share as the font. The coding may vary depending upon the font you choose).


  • Now go to Blogger Dashboard > Design > Edit HTML.
  • Find for </head> tag and paste below code just before </head> tag.

(Note - Don't forgot to add </link> after the code)

Adding The CSS Code


If you wish to display these fonts as your POST TITLES, then declare them as follows.

.post-title {font-family: 'YOUR FONT NAME';
}

If you wish to have them displayed on the body section of your posts, then you need to edit your CSS for post body as follows.

.post-body {font-family: 'YOUR FONT NAME';
}


(Note: Replace YOUR FONT NAME with the font name you have chosen. In my case, it is Dancing Script. You have to remove the previous font style that existed on your template.)
Save your template.

The coding may vary depending upon the template. If you have some unique custom templates, then I'm sure the coding will be different. So, don't worry. Just mention your blog URL in comments and I will help you about customizations.Don't forget to share your views about this post.

Post a Comment

  1. http://technouniversityworld.blogspot.in

    How to Add the .Post-body code in my template. i can't understand that step

    ReplyDelete
    Replies
    1. Hi,I have visited your blog.And I noticed that your are using h3 tag as a post title.Find below code in your template

      h3.post-title {
      font-size:24px;
      color:#2d2c2e;
      text-decoration:none;
      margin:0 0 12px 0;
      }

      And replace it with


      h3.post-title {
      font-size:24px;
      color:#2d2c2e;
      text-decoration:none;
      margin:0 0 12px 0;
      font-family: 'YOUR FONT NAME';
      }

      Now replace your font name with the Google font name.

      That's it...

      Delete
  2. http://johanclaeys.blogspot.com

    How to Add the .Post-title code in my template. i can't understand that step

    already put the link tag with with closing link before ... but don't catch the rest of the step.

    ReplyDelete
    Replies
    1. Hi Johan,

      First find below code in your template

      h3.post-title a {
      font: normal bold 16px Verdana, Geneva, sans-serif;
      color: #444444;
      }

      Now replace it with

      h3.post-title a {
      font-weight: bold;
      font-size: 16x;
      font-family: YOUR FONT NAME HERE;
      color: #444444;
      }

      Now replace YOUR FONT NAME HERE with your google font name.

      Delete
    2. This works !! ... really apreciate your input... ! I have been wondering is there no other way in other to change the code? In e.g. by downloading the template and using local html (wysiwig) editors to search/modify the code? I allways have to scroll down the template and its really a tedious task to locate the code... in the Template ... Edit html straight in Blogger. On top of that there is no search built in to track and locate the code... in order to speed up.

      Delete
    3. Johan when you want to edit your template the just go to Edit HTML and hit CTRL+F a small search box will pop out then enter your search queries and hit the seach button.

      Delete
    4. Is this then the solution to make it work with the body tag?
      .post-body a {
      font-weight: bold;
      font-size: 16x;
      font-family: YOUR FONT NAME HERE;
      color: #444444;
      }

      The size works but doesn't change the font-family...

      Delete
    5. Rahul, I apreciate the solution with Ctrl+F didn't know this worked in Blogger.. was considering a copy / paste to an html editor ... :-).. great tip !

      Delete
    6. @Johan - Sorry bro. I can't understand what are you asking ?Will you please explain it in brief ?

      Delete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Simply put I want to do the same (post.title) but this time for body-post.

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Go to Dashboard > Edit HTML
      Take a backup of your template
      find this code in your template

      .post h3 a, .post h3 a:visited { color: #acadae; }
      .post h3 a:hover { color: #555657; }
      h3.post-title, .comments h4 {
      font: normal normal 30px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
      margin: .75em 0 0;
      }

      replace it with

      .comments h4 {
      font: normal normal 30px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
      margin: .75em 0 0;
      }

      See the preview of the template it will work.Good Luck....

      Delete
    2. For some reason I couldn't find the entire code. This was all I could find:

      .post h3 a, .post h3 a:visited { color: $(post.title.color); }
      .post h3 a:hover { color: $(post.title.hover.color); }

      h3.post-title, .comments h4 {
      font: $(post.title.font);
      margin: .75em 0 0;
      }

      Delete
    3. You have found below code in your template

      .post h3 a, .post h3 a:visited { color: $(post.title.color); }
      .post h3 a:hover { color: $(post.title.hover.color); }

      h3.post-title, .comments h4 {
      font: $(post.title.font);
      margin: .75em 0 0;
      }

      replace it with


      .comments h4 {
      font: $(post.title.font);
      margin: .75em 0 0;
      }

      take a preview if it it works then save your template.

      Delete
    4. I did this but I still couldn't get my post title to change. I think I'm just going to have to give up.

      Delete
    5. This is final,Find this (or similar to this) code in template

      h3.post-title {
      font: normal normal 30px Georgia, Utopia, 'Palatino Linotype', Palatino, serif !important;
      color: #abadae !important;
      font-family: 'Great Vibes', cursive;
      }

      and replace it with below code

      h3.post-title {
      font-size: 30px;
      font-family: 'Great Vibes', cursive;
      color: #abadae !important;
      }

      If it doesn't work then download your template and send me @
      ipparrahul@gmail.com

      you can save your template as .txt format.

      Delete
    6. Hi Rahul,
      This also didn't work. I have emailed you my template. Just thought I would check to make sure you received it.
      Thank you so much for your help! I really appreciate it!

      Delete
    7. I didn't received your template yet....

      Delete
    8. I sent earlier yesterday. I'll try again now just in case.

      Delete
    9. Which font do you want to use?

      Delete
  6. I was able to enter the code for the font right above the head tag.

    The code for post titles looks very different on my blog, though, and I haven't been able to find a way to correctly add the .post-title code.

    How would I change the .post-title code to use Leckerli+One font?

    Thank you for this post & for your help,
    Dawn
    http://mamasmonkeys.blogspot.com

    ReplyDelete
    Replies
    1. Follow below steps carefully,

      1. Add below code just above tag (Ignore this step if you have already done this step)


      <link href='http://fonts.googleapis.com/css?family=Leckerli+One' rel='stylesheet' type='text/css'></link>

      2.Now find below code in your template,

      h3.post-title, .comments h4 {
      font: normal bold 20px Leckerli+One;
      margin: .75em 0 0;
      }

      replace it with below code

      h3.post-title, .comments h4 {
      font: normal bold 20px Leckerli One;
      margin: .75em 0 0;
      }

      now if you wish to change your font-size then you can adjust 20px ass you wish.

      Finally take a preview of your template and save it.

      Delete
    2. Thank you! I really appreciate it!

      Delete
  7. Hello Admin,
    I'm using h2 tag as post title, where do I find it.
    Please Help me..

    ReplyDelete
  8. Hi Rahul,

    I've figured out how to change my post title, tabs, and sidebar but for some reason cannot get my post body font to change to "Quicksand". Could you please help??

    theangledcoast.com

    Thanks!!

    ReplyDelete
    Replies
    1. Add this code just before of </head> tag in your template

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

      and take a preview,if its showing error while showing preview then use use below code instead of above,

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

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

      Delete
    2. remove extra space between link and href keep one space only

      Delete
  9. Please help me I also cant understood how to change the font of my blog past body please help

    ReplyDelete
  10. I did everything and it didn't make any changes. Is there something i did wrong?

    ReplyDelete
  11. And I wanted to use this font: font-family: 'Salsa', cursive;

    ReplyDelete
  12. Rahul Brother Which Font You Are Using For Your Blog...???
    Name Of Font...(___)

    ReplyDelete
  13. hie! rahul i also couldn't understand that post.body step. my site : cheatandlearn.blogspot.in

    ReplyDelete
  14. Nice content! The writing process enables concepts become more understandable to readers. It is further broken down as: pre-writing, writing, reviewing, revising and editing.books

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top