July 8, 2011

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!

28 comments:

  1. THANK YOU!!!!
    I worked on your directions and could get the post title font to be added to the design tab but still didn't get the size or font to change. I finally figured out that when I copied and pasted the second code it had to be placed before the (.

    Thank you so much for the directions.

    ReplyDelete
  2. So glad you got it figured out!

    ReplyDelete
  3. You rock! I have been doing this the long way writing in the custom font name in the html.

    How would I do this for sidebar and Blog Title?

    Thank you SO SO much!

    ReplyDelete
  4. Dani, when I change my design will I have to redo all these steps again?

    ReplyDelete
  5. If you change your template, meaning if you change the HTML so that the lines you added are no longer there, yes you will have to redo all these steps again.

    If you just change your background image with the HTML sidebar gadgets, then no, you will not have to redo these steps.

    ReplyDelete
  6. Blogaholic,

    The Sidebar and Blog Title already have their own variable and font, so you shouldn't have to create a new variable for that one.

    If you want the sidebar to be separate from the date, you could create a new variable for the date font just like we did for the post title font. Give it whatever name you would like. Then find the CSS code that says "h2.date-deader" Add the following line before the closing curly bracket: font:$datefont;

    Of course only use datefont if you gave the variable the name datefont.

    ReplyDelete
  7. Thanks so much~ This really help me~ ^^

    ReplyDelete
  8. Than you for this post. it really works. Now, how can i change the font size in specific posts when the title is too long without changing all the post titles?. Regards

    ReplyDelete
  9. Rodrigo,
    I wish I knew the answer to your question. It's frustrating when long post titles run into the blog post. I will look into it and if I figure it out, I will post about it.
    ~Dani

    ReplyDelete
  10. HUGS, HUGS, HUGS!!! I LOVE YOU! Okay maybe that's going a little far but seriously I have tried a MILLION different ways and couldn't get it to work. This was so easy to follow and less hassle than anything else I have tried. Bless you!!!

    ReplyDelete
  11. Might this work for the post titles? Any suggestions?

    http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container

    regards

    ReplyDelete
  12. I'm so glad so many have found this helpful!

    Rodrigo, thanks for the great site! Unfortunately, I do not know JavaScript, so I can't begin to figure out how to apply their code for our post titles.

    Java is on my list of things to learn in the next few years, but in the meantime maybe you can help us. If you know how to make this work for Post Titles and have the tutorial posted on the web, give me the link and I will be sure to link to you!

    Thanks!

    ReplyDelete
  13. woohoo i did it! THANKS!http://thesmallthings89.blogspot.com/

    ReplyDelete
  14. thank you for such clear and perfect instructions! I have been trying to figure out how to do this forever. so helpful!!

    ReplyDelete
  15. OK, a question. I tried to apply these instructions for the blog description, which also let me initially change the color but not the font. So I think I did it right, and when I go to the template designer it now has the option of changing fonts for the blog description. BUT when I choose a font and a different size nothing actually changes on the blog,including changing the text color. I've tried to "view blog" and "apply to blog" but nothing makes it works. Any ideas what could be going on? thanks so much for all the information you provide!

    ReplyDelete
    Replies
    1. If you are using the Minima template, it should already give you the option to change the font for the blog description. Look through the variables and you should see this:

      <Variable name="descriptionfont" description="Blog Description Font"

      If you don't have that in your variables, then you need to make sure that your variable name is then listed in the CSS code below the variables. For the description font, you need to find this piece of CSS code:

      #header .description {
      margin:0 5px 5px;
      padding:0 20px 15px;
      max-width:700px;
      text-transform:uppercase;
      letter-spacing:.2em;
      line-height: 1.4em;
      font: $descriptionfont;
      color: $descriptioncolor;
      }

      The line that says, "font: $descriptionfont;" is the part that links back to the variable and tells your blog to change the font whenever you change it in the template designer. The same is true for the line that says, "color: $descriptioncolor;"

      Does that make sense?

      Delete
  16. Thanks so much for your response. That does make sense, and it's basically what I did, although I"m using the Simple template instead of minima. It seems that it's actually a browser issue, because when I looked at it on my husband's PC using firefox, the description font/size changed. But it didn't on my Mac using chrome or safari. Interestingly, all the other font changes (to the Blog title, tabs, etc) worked on any browser. Any ideas how to address this?

    ReplyDelete
    Replies
    1. Different browsers read HTML/CSS differently so it may be a browser issue. Or you may have added a font that your Mac does not have so your computer may not show that font. I thought all the Blogger fonts would show up on any computer but they may not. I am not sure why. Do you want to send me a link to your blog and I can take a look?

      Delete
  17. I have followed your directions exactly and when I make the change to the font in the advanced edit, it shows the title being the font I want. When I apply the changes to the blog then preveiw the blog the title is showing the same font as the blog post. It's like the font is being over ridden by the font I have set for the post and I can't figure out how to change it. Any suggestions? I am new to blogging and trying to figure it all out and it's driving me crazy! Thank you! Your directions were amazing

    ReplyDelete
    Replies
    1. Can you copy your template code for me and paste it in an email to me at blogdesignsbydani[at]gmail[dot]com? I'll take a look and see if there's anything wrong there.

      Delete
  18. Hey Thanks for this
    visit my blog http://onlyfullsoft.blogspot.com

    ReplyDelete
  19. Have been trying for the past 3 days till i followed your steps! It worked!! Thanksss ((:

    ReplyDelete
  20. Clear instructions that worked a treat - thanks! :)

    ReplyDelete
  21. Can you do this tutorial for simple template too?
    i cant change my post title font using the template designer.

    ReplyDelete
  22. hy dani,
    how can i change the font-size of main post?

    ReplyDelete
  23. I am going to try and use your instructions to change my Post Title size…. but wondering if you have instructions for changing the font size in the body of the posts? I have a template that I purchased off a gal on Etsy - who did an edited version of the Minima template and she swears the font size can't be changed. I absolutely must change it - it's TINY. I use Blogger's editor to make the blog post font large and it looks bad. Can you help?? I can't get any response from the gal I purchased this pre made template from. (Frustrated!!!) Thanks! Retro Girl www.retrogirl.net

    ReplyDelete
  24. Hey, I want to thank you so much for your awesome guide. It's been really helpful even though with the current blog settings, it is so much easier to edit our own blog designs. Either ways you've been a great help. Here is my blog website: http://ivvvvvyy.blogspot.sg/

    ReplyDelete

Thank you so much for leaving a comment! I would love to answer everyone's questions, but I am a busy mama. I will try my best, but technical questions that require me to study your blog's html are very time consuming for me. I may not be able to answer all of these comments. If you are a reader that knows the answer to a question, please help your fellow readers by offering your advice.