How To Use Google Web Fonts In Blogger ? - Helper Blogger

Helper Blogger

Blogger Widgets | Templates | Tutorials

    • Latest

    Thursday 16 February 2012

    Home Blogger Tricks Blogger Tutorials How To Use Google Web Fonts In Blogger ?

    How To Use Google Web Fonts In Blogger ?

    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.
    Tags
    Share This
    Author Image

    About Rahul

    By -
    Labels: ,

    38 comments:

    1. TestLab24 April 2012 at 07:16

      http://technouniversityworld.blogspot.in

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

      ReplyDelete
      Replies
      1. Rahul24 April 2012 at 07:51

        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. TestLab24 April 2012 at 08:12

        Thank you Rahul

        Delete
      3. Rahul24 April 2012 at 08:20

        You are welcome...

        Delete
    2. Unknown1 May 2012 at 19:07

      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. Rahul1 May 2012 at 19:17

        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. Unknown1 May 2012 at 19:35

        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. Rahul1 May 2012 at 20:02

        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. Unknown1 May 2012 at 20:12

        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. Unknown1 May 2012 at 20:16

        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. Rahul1 May 2012 at 21:24

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

        Delete
    3. Unknown1 May 2012 at 21:35

      This comment has been removed by the author.

      ReplyDelete
    4. Unknown1 May 2012 at 21:53

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

      ReplyDelete
    5. Tess Delaune8 May 2012 at 23:31

      This comment has been removed by the author.

      ReplyDelete
      Replies
      1. Rahul8 May 2012 at 23:52

        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. Tess Delaune9 May 2012 at 00:07

        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. Rahul9 May 2012 at 00:24

        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. Tess Delaune9 May 2012 at 00:42

        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. Rahul9 May 2012 at 00:56

        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. Tess Delaune10 May 2012 at 13:32

        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. Rahul10 May 2012 at 13:34

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

        Delete
      8. Tess Delaune10 May 2012 at 13:38

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

        Delete
      9. Rahul10 May 2012 at 14:01

        Which font do you want to use?

        Delete
      10. Rahul10 May 2012 at 14:10

        Done.Check your mailbox.

        Delete
    6. MamaDuck7624 May 2012 at 02:13

      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. Rahul24 May 2012 at 09:14

        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. MamaDuck7630 May 2012 at 01:47

        Thank you! I really appreciate it!

        Delete
      3. Rahul30 May 2012 at 10:57

        It's my pleasure pal...

        Delete
    7. Sriram24 May 2012 at 14:28

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

      ReplyDelete
    8. The Angled Coast3 August 2012 at 00:14

      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. Rahul3 August 2012 at 14:37

        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. Rahul3 August 2012 at 14:39

        remove extra space between link and href keep one space only

        Delete
    9. Unknown3 August 2012 at 22:42

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

      ReplyDelete
    10. Lissie7 August 2012 at 05:35

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

      ReplyDelete
    11. Lissie7 August 2012 at 05:40

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

      ReplyDelete
    12. Syed Bahadur Shah8 August 2012 at 16:38

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

      ReplyDelete
    13. Unknown11 May 2013 at 12:36

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

      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

    Subscribe to: Post Comments (Atom)

    Author Details

    Hello Reader. This is Rahul, the author of Helper Blogger. Hope you have found this content useful. Do follow us on social media to stay updated with our latest widgets and tutorials. Also, don't forget to share this post using share buttons located just above.