Home » Blogger Tutorials, Tricks and Hacks » Blogger Posts / Archive Tricks » Stylize Your Blog’s Post Titles With Google Web Fonts

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Stylize Your Blog’s Post Titles With Google Web Fonts

Stylize Your Blog’s Post Titles With Google Web Fonts

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

2,104 views

If you want to spruce up your blog’s look a bit without making any major changes to the design template, one of the places you can always start with is your blog’s post title. Choosing a good design should not only make your post title attractive but should also make it easier for the reader to spot. I’ve seen blogs with poorly chosen post title designs that it was hard to tell whether you’re looking at the same article’s subheading or an entirely new different article altogether.

Anyway, in today’s featured tutorial created by Rahul Jadhav, you’ll learn how to customize your blog’s post titles using Google Web Fonts.

  1. First thing to do is go to Google Web Fonts.
  2. Look for a font that you like by scrolling through the list and once you find your choice, click on the ‘Quick-Use’ link to the right.
  3. Scroll down and copy the codes in numbers 3 and 4.
  4. Once you have copied both codes head over to the ‘Template’ section of your Blogger dashboard.
  5. Click on ‘Edit HTML’ and then choose ‘Proceed’.
  6. Look for the <head> or </head> tag in your template’s code by pressing ‘Ctrl+F
  7. Paste the code of your chosen web font below the <head> tag or above the </head> tag (pretty much anywhere between those two tags will do) and then add a forward slash (/) just before the “>”.

For example, if your font code looks like this:

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

By adding the forward slash (/), it should then look like this:

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

8. Now look for “.post h3” or “.post h2” (if you can’t find both, try “h3.post-title” or “h2.post-title”) in the template’s code.
9. Paste the CSS code you copied from Google Web Fonts in number 4 before and above the closing brackets (}). Example:

Before:

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

After:

h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
font-family: 'Shadows Into Light', cursive;
 }

10. Click on the ‘Preview’ button, and if you like the result, hit the ‘Save template’ button.

And you’re done!

Liked It ? Please Share

Comments

7 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Neel shah says:

    Awesome was waiting for this !

  2. Awesome! Thanks for the tutorial.

  3. Hello guys,

    I think i am stuck in between… I can’t find out the 8th Step codes I found “h3.post-title” but can’t mark out where is the below mentioned codes ?? Can you Help me … !!

    Thanks in advance :)

    • Rudy says:

      The codes mentioned in the 8th step are the ones Google Web Fonts gives you for you to copy after you click on “Quick-use” (scroll down and you’ll find them on numbers 3 and 4). Hope this helps.

  4. when i search
    i get 2 results and none of them is similar to the one whiwn in ur example

    these are the two results

    and

    h3.post-title {
    margin: 0;
    font: normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    }

    pl tell me what to do? where to put number 4 code?

  5. when i search h3.post-title
    i get 2 results and none of them is similar to the one whiwn in ur example
    these are the two results

    and
    h3.post-title {
    margin: 0;
    font: normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    }
    pl tell me what to do? where to put number 4 code?

  6. cars says:

    Struggling to get your car paid off? Are you mad
    about the last deal you got? Perhaps you’re looking for an automobile now, and you’re not sure what to do differently.
    You’re in the same boat with many other people. Keep reading to find out information regarding what to do next time you enter a dealership.

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here