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.

Using fancy fonts in your template! EASY PEASY!

Did you know that Google has a directory of fonts found at the Google Font Directory?

I DIDN'T KNOW THIS EITHER!!!!!!!!

This is very exciting news for those of us who want to make our blogs a bit different, especially when it comes to using non-boring fonts.

Georgia and Verdana, I love you guys but sometimes you bore me to tears! I knew there was a way to convert a font to a flash file and then use that, but that was a massive pain in the bum!

Anyway, here's my tutorial on how to use any of these fonts in your blog! Easily! Just two lines of text in the code need changing!

A list of fonts we can pick from can be found here. Take a look at some of these babies:

A few things before we start:

• You should be somewhat comfortable about editing html. You don't have to be a professional but you need to be somewhat savy and not scared of html.
  
  
• There are only a limited number of fonts. Sorry but you can't use that font you saw that time. You can only use the ones Google have to pick from. Don't worry, there are some nice ones and fingers crossed more will be added soon.
  
  
• I DO NOT recommend using the font for your whole blog (c'mon, we don't want to make people's eyes bleed!) but I'll show you how to use it in the post title header of your blog posts. Infact I have been using Lobster font in the title post of this blog for a week or so now. Yes, click out of your reader and come and have a look.
  I would suggest using these fonts for the blog post title, the blog title or the sidebar header title.
  

Sharnee's very exciting tutorial on how to add fancy fonts to your blog post:

1) Click on the DESIGN and the then EDIT HTML tabs in Blogger

2) Download a copy of your current template & save it somewhere safe (naturally this is recommended any time you're making changes to your blog in case things go CRAZY).
Please be aware that for this tutorial I am using the generic Watermark blogger template but it should be pretty similar no matter which template you're altering.

3) Visit the Google Font Directory and pick which font you want to use: the site is here.
Once you have picked a font you want to use, click on it. I'm selecting "Reenie Beanie" as a test.
Click on "get the code"

Now you'll see two boxes of code.

Copy the top box of code.

In the case of Reenie Beanie, that code looks like this:

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie&subset=latin' rel='stylesheet' type='text/css'>

Now, unfortunately when I try to use this code, exactly as Google have provided, I get an error. Don't worry, I'll explain how to fix it.

4) Return to Blogger and look to the box box of code. What we are looking for is the <head> tag

Paste the code directly below this (yes, you can hit return and put it on a new line)

So now, this is how it looks for me:

(the pink being the code I just added)

Now here's the important parts to make it work:

• put a space and then a '/' at the very end, just before the last pointy > bracket!
• erase the &subset=latin bit

Now my code looks like this:

NOTE: there is a plus "+" sign between the words Reenie and Beanie. If you have chosen another font with a single word name, then it will just be the one word and no plus sign.

5) This tutorial shows you how to change the font used for the blog post title. Therefore we have to scroll down the code until we find the following:

h3.post-title {
font: $(post.title.font);
margin: 0;
}

Let's delete that font: $(post.title.font); line and replace with this:

font: 28px 'Reenie Beanie', arial, serif;

So that code now looks like this:

h3.post-title {
font: 28px 'Reenie Beanie', arial, serif;
margin: 0;
}

OK!

NOTE: You will be able to play around with the font size, as the above is using 28px as the size. Make it smaller, make it bigger. Try some different sizes. 28px is a bit small for me so I'm going to make it 36px.

(also, in case you were wondering, the "arial & serif" fonts are listed there for backup in case the computer can't read the fancy font, it will revert to a safe one)

Click PREVIEW

If it looks good then SAVE!

HOORAY YOU DID IT!

Now, I did this example on the Watermark template (using Bloggers fancy new template designer). If you are using one of my delightful templates - or another customised one - the title code you're looking for may be called something else. In my templates they are often called:

.post h3 {

Usually under /* ---( main column )--- */

Sometimes, the font size and the font type may be on different lines. You may have to delete both of these single lines to make it work.

Anyway, if you have any problems, leave a comment and let me know.

Remember, if everything gets screwed up then you did save your template for backup! Didn't you?

PS: I tried to write this as clearly as possible and I have probably made it seem incredibly challenging but it's actually really REALLY easy!