How to Change the Size and Font of Your Post Titles

Many of you may have noticed that when you go into the Template Designer in Blogger (if you have the Minima Template) and try to change the size and font of your Post Title there isn't an option to do so. (Remember my Post on Cute Blogger Fonts?) You can change the color, but not the size and font. Every other type of heading has that option, but not the Post Title. I don't know why this is, but there are a few ways to get around it.

The First option is to follow these instructions: Cute Font Post Titles and Sidebar Titles . This tutorial looks great on your blog, but is fairly complicated. It does allow you to use any true-type font you want and lets you adjust the size of these titles yourself. But it requires you to download several files and open a webs.com account.

The Second option I came up with myself. (You will have to edit your HTML, so make sure you back-up your template!) One more thing...this tutorial is just for the Blogger Minima Template. (Here's how to get this template: Follow Steps 4-7 HERE.)

(Click on images to enlarge them.)


From the Design tab, click "Edit HTML".
Scroll down until you see "Variable Definitions". Now, let's take a minute to understand what you see here: (Don't change anything yet! Just look!)

Every portion of text in your blog is given a color and a font (except the Post Title font). In order for your blog to know which ones to use, each type of text is given a "variable name". The first line says the Page Background Color has a variable name of "bgcolor". So when your HTML/CSS says "bgcolor" it will change the Page Background Color. If you look through this all, you will notice that there is a variable name for "Post Title Color" (it is "titlecolor") but there is not a variable name for "Post Title Font".

I will show you how to create a variable name for the "Post Title Font". Scroll down to see the variable names for the fonts: (Remember, don't change anything yet. Just look!)

We are going to copy the variable information for the Blog Title and make a few changes so that it will work for the Post Titles.

Here's how to do it:
1. In the Variable Definitions, copy the Variable definition for the Blog Title Font. Make sure to get the entire thing. Here it is just in case:

<Variable name="pagetitlefont" description="Blog Title Font"
             type="font"
             default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">

2. Now paste it right below the original so that you see the same thing twice. Your variable definitions should look like this:

3. In the Variable that you copied, you need to make the following changes:

Change "pagetitlefont" to "titlefont" and Change "Blog Title Font" to "Post Title Font"

Your new Variable should look like this: (I highlighted the changes for you in red.)

<Variable name="titlefont" description="Post Title Font"
             type="font"
             default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">

4. Now scroll down until you see this:

/* Posts
-----------------------------------------------
 */

Scroll a little farther until you see:

Add the following line:
  font:$titlefont;

So that it reads:

(Make sure to copy it exactly. You must have the dollar sign and the semicolon or it won't work. Also, the bracket } must be where you see it above.)


3. Preview your changes and click "Save Template" if everything still looks ok. Your Post Title may not look much different, but as long as nothing drastically changed, you are fine.

4. Now time to change the font and size of your Post Title. From the Design tab, click "Template Designer". Then click "Advanced".

Scroll down until you see "Post Title Font"

Once the "Post Title Font" is highlighted, click the font you like best. (You can Preview it immediately when you click on each font.)

To make the Post Title bigger, change the percentage you see in the box to a bigger number. To make it smaller, change it to a smaller number. Just make sure you leave the % sign. To see the changes, just click in the blank gray area and the changes will be applied in the Preview box.

Once you are done, click "Apply to Blog" and then "View Blog"

There you go! Customized Post Title Font!