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!
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 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.
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"
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:
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;
}
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;
}
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)
(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 )--- */
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!
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!
Thanks for the great tip! I'm going to try this out soon :)
ReplyDeleteI love your tutorial - it makes everything so clear and easy. I'd like to know if there's a possibility to change the font of one word inside the post - I've been using a .png file instead of formatting the text, but it doesn't look good. I'd be grateful for any clue on doing this.
ReplyDeleteYou are a genious!!! I already did it and totally work for me :) It is very easy, and looks great :) I also did it with the sidebar header title.
ReplyDeleteThank you so much for the tutorial!
Thank you. :-)
ReplyDeleteThank yo so very much for this tutorial. I tried to do this on my own a couple of weeks ago to no avail! You rock!
ReplyDeleteYou are amazing, you know that, right?
ReplyDeleteThanks guys, your comments are so ace!
ReplyDeleteTruscaveczka: that is a tricky one re: the one word in a different font. I assume you mean a fancy font and not one of the generic gang (arial, verdana, courier etc). It might be done by adding some html for the single word in question but I would imagine it might be annoying to add html every time you wanted to do it. Let me have a think about this one.
xx
Thank you so much! I tried to use the Google Fonts, but they didn't work. Thanks for the tips to get them to install properly!
ReplyDeleteThank you so much! I spent all day trying to do this using different codes and this finally worked!
ReplyDelete.post h3 {
ReplyDeletemargin:.25em 0 0;
padding:0 0 4px;
font-size:130%;
font-weight:normal;
color:$titlecolor;
is it correct that i change to
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:130%;
font-30px'Lobster', arial, serif;
color:$titlecolor;
i tried to change it. but it seems to be no changes. why is it like that?
Hi Lili,
ReplyDeleteTry this:
Ditch the 130% line.
Also, you had an error on this line "font-30px'Lobster', arial, serif;" - SHOULD BE a ":" and not a "-" and also there should be a space in between 30px and the 'Lobster' bit. So should look like this:
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font: 30px 'Lobster', arial, serif;
color:$titlecolor;
Let me know how you go!
you rock sharnee :) I go so many great tips from here.
ReplyDeleteNow I got a question too: I only wanna use this font for my post title headlines. Where do I post this code then? Or what do I have to change?
Hugs from Eva
sorry, I found it myself ;)
ReplyDeletebut it doesn's show the font only makes it bigger :(
now I got it finally...blondes need a bit longer lol.
ReplyDeletei did it! thank you sharnee!
ReplyDeleteThanks so much for this!
ReplyDeleteThis comment has been removed by the author.
ReplyDeletethank you thank you thank you! It worked for me too Had a small glitch but I solved it after doing some googling. If anyone else is having an error saying their template cannot be parsed as it is not wellformed, check that your '&' sign in the code is replaced by the characters '& amp ;' (without the spaces, sorry it doesn't appear properly without the spaces).
ReplyDeleteSharnee I love your templates as well, was using one of them in the past and I'm looking to change again so I'm eagerly awaiting for something to catch my eye!
How to edit the font of header?
ReplyDeletegreat an excellent tips.. :) well done!
ReplyDeletethanks! great tutorial :)
ReplyDeletehow to edit the font of header? >.<
ReplyDeleteOMG cool!
ReplyDeletemy tittle font just changed.
thankyou sharnee! you're really cool.
can so teach me how to change font on the post?
i want to change it to trebuchet ms and small.
i've tried so hard :(
Thanks for the tutorial Sharnee!
ReplyDeleteBut how can I change the sidebar header font? -__-