Tuesday 25 January 2011

The best and most exciting news about using different fonts in your Blogger template! {aka: I am breaking up with Verdana!}

A while ago I posted instructions on how to use the Google Fonts in your blog.
It worked perfectly and wasn't that hard to do (and looked sweet!).

In case you did not know, these Google Fonts are now appearing in the "Template Designer" area of your Blogger Dashboard.


What does this mean?
Now you can use some awesome fonts in your blog (bye byeeeee arial!) and you don't need to know or modify any code, it can all be done with the click of a mouse.


Who can use it?
Well, everyone with a Blogger blog I assume. What you DO need to know is that if you have a blog template with the font types already hardwired into the blog html/css code, then you probably won't be able to use this feature until you have modified the code.
That really isn't that difficult to do and I will write a tutorial soon.

Some of my templates She May Adore Me, BYO Background, Rain Rain Go Away - some of my most recent templates - have the font type of the blog header (and possibly the sidebar headers) pre-determined in the code. So trying to change them in the method I have outlined below, will not work.

Never fear - I can re-write these templates to include this new functionality which will mean you will be able to select different fonts easier.

What this DOES mean though - that most of you can start changing fonts now!


Can I use any font I want?
No. You can only access the fonts in the Google Font Directory (of which there are now quite a few)!


OK OK, so how do we do it?
Log into your blogger dashboard. For this example I am going to use the Holiday on Me template:



Yes, lovely, but what happens when you don't love Georgia anymore?


Click on DESIGN and then the TEMPLATE DESIGNER tab:



(you may not have known about this part of Blogger before!)

If you are using a generic template from Blogger, you can probably control most of these tabs - background, widths etc, but if you are using one of mine, the one you want to click on is "ADVANCED" (see below) which is where the fonts, the colours and the font sizes can be controlled.



Again, please remember if any font or colour or font size is written into the code of the blog template, you won't be able to change it here.

So since I am changing the "Holiday on Me" template, I DO have control over which font I want throughout the blog.



Now you will see that there are a lot more fonts to chose from. You can even make them bold, italic and change the size.

Select which fonts you want, pick the size and you are sorted!

Some fonts are linked - ie: the same font may be used in the sidebar header and the header of the blog. The reason for this is that they have the same code in the blog. If you want them to be different you will have to change the code.

I did notice that some fonts did not show up in the live preview (but they do show up when you click save and view the blog).




This is what I came up with (ok, maybe a little boring)!

If you have any questions, please let me know.

In a nutshell: THIS IS VERY VERY EXCITING! Previously it was only open to those in Blogger Draft but now it's open for everyone! Read more on Blogger Buzz.

11 comments :

  1. does this only work in the updated version of blogger template? im currently using the old template for my blog.

    ReplyDelete
  2. Thank you sooo much! I just changed my post titles and sidebar titles. Looks so much better :)

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Oops I think my comment got lost in cyberspace LOL
    Oh oh I am so dizzy bc of all this pretty designing and useful information. You just make AMAZING templates wow. The Say Cheese template is amazing for my new photo blog. Are you maybe rewriting the template so I can change the font in the header. I also can't seem to get the photos aligned in the template. The photo is 900px and there isn't the same amount of white space on each side? Hugs from a happy Liel♥

    ReplyDelete
  5. It is really great and nice template..
    I like it and thanks for your effort to convert it..

    Job Description Template

    ReplyDelete
  6. Hello I have a question here. =) everything is just so fine , I can change my font as well but I wonder why the font of my blog's tittle couldn't be change? I'm using blog template from your site.

    ReplyDelete
  7. Fonts are one of the most important parts of each web project. Blogging for the most part is fun and rewarding, but can be slow and frustrating.

    ReplyDelete
  8. This is such a nice tips. I will share it with my friends. Thanks for its.

    ReplyDelete
  9. hi...
    im using ur template..its cute..thanx..but im having a problem with my font..i couldnt change my font for my post..can u help me?
    this is my blog url
    http://nida-razak.blogspot.com

    and this is my mail
    as_ieda02@yahoo.com

    ReplyDelete
  10. oh my god.im fallin in love with your tutor dear:)
    nice to meet you:) thanks

    ReplyDelete

If you're having issues, PLEASE leave an email address I can contact you on - and also don't forget to leave your blog URL. Please also read my FAQ which are >>> HERE

I advise you to also "subscribe to the comment feed" and get email updates when I respond to your question.

Spam/advertising comments will NEVER BE TOLERATED and will be deleted immediately!

Thanks for reading,
Sharnee