How to customize your post title font (Aug. 2013)

This tutorial will show you the newest way to change your font for your post titles.  We will be showing you how to use Google Web Fonts in Blogger.  Google offers over 500 fonts that are available for your blog!   This will give you more options than the standard fonts blogger offers.   It is really easy and won’t take too long!!   Your blog will stand out with these fun custom fonts!

1.  Go to Google Web Fonts and find a font that you would like to use for your post titles.  For this example I picked a font that is not too busy and is easy to read.  Next to the font you picked you will want to click on the ‘Quick-use’ link .

2.  You will need to copy the codes in number 3 and 4 to use in one of the next steps.

3.  Next log onto your blog.  Go to your ‘Template’ page and click on ‘Edit HTML’.

4.  On this step you will be looking for the <head> tag within your template code.  If you hit CTL+F  it will bring up a search box and you can paste <head> into that box.  You will now copy code number 3 from your Google fonts page and paste it directly ABOVE the <head> tag. After you paste it in you will need to insert a forward slash ( / ) before the > at the end of the code.  My code originally looked like this:

<link href=’http://fonts.googleapis.com/css?family=Handlee’ rel=’stylesheet’ type=’text/css’>
and now looks like this (see screen shot below):
<link href=’http://fonts.googleapis.com/css?family=Handlee’ rel=’stylesheet’ type=’text/css’/>

5.  Go to your search box again by hitting CTL+F and search for /* Posts.  You will find a code that looks similar to the one bellow.
Directly above the closing bracket ( } ) you will insert your code number 4 from your google web fonts page.  My code ended up look like this:

h3.post-title {
  margin: 0;
  font: $(post.title.font);
font-family: 'Handlee', cursive;
}


6.  Save template and enjoy your new Post Title Font!!  **I wanted to make my font a little larger so I went to my ‘Layout’ page and ‘Template Designer’.  Click on ‘Advanced’ and ‘Post Title’.  You can change the size here if you would like your new custom font larger!!  You can also go to the ‘Links’ tab on this same page to change the colors of your new post title!**  Below is the before and after picture of the fonts.

 

 

8 Comments

  1. Thank you so much for all the helpful tips ! Only thing, I can’t do step 5 because I can’t finf the ‘Post’ word.

    Any help ?

    Thank you !!

  2. I also can’t find “/*Posts” in my code! I am using “Simple” template. What kind of template work best on changing font?

  3. Hi I’m trying to do this and seem to have a tiny bit of trouble. After posting my #3 code it says, “Could not load template preview: Error parsing XML, line 5, column 2: The value of attribute “type” associated with an element type “link” must not contain the ‘<' character."

    ???

Leave a Reply to Azu Cancel reply

Your email address will not be published. Required fields are marked *

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>