Customized Fonts for Blogger Blogs

Hey, guys!! :)

So, Autumn asked me how I got customized fonts on my blog. You will NOT believe how long I searched for this code on google, until I just ended up making my own code. (that was after I found out how to build it. Anyway) This code seriously needs to get out there, which is why I decided that I would make my next post (this post) about that.

First off, you're going to need to pick a font or two that you want, right? So hop on over to the Google Fonts that are offered and just pick one, for this tutorial. Got one? OK, good, let's go.

The font I'm going to pick is called Shadows Into Light.

1. See that blue button where it says "add to collection"? Click it.
2. In the right corner you'll see three buttons. Click the one that says "use".
3. Scroll down until it says "add this code to your website". Copy that code and put it somewhere safe. (sticky notes or like wordpad or something like that works amazing)
4. This is an example of the code, real quick:
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
5. Got it somewhere safe? Good. Now, you're going to add a / right before the last >, so that the code looks like this:
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'/>
(I put the / in red so that you would notice it better. ;))
6. Log in to your blogger account and click on the blog that you want to edit.
7. Go to "template".
8. Click "Edit HTML".
9. First off, don't freak out about going into the HTML. I understand, I was TOTALLY freaked when I first had to try this. It's no biggie. I would suggest that when you first try something like this out, get a test blog, just to make you lest wary of using your own HTML and more comfortable with it. It's highly unlikely that you're really going to hurt anything.
10. OK, see this line?
<b:skin>...<b:skin/>
(it should be like right towards the top)
Paste that code up there^ right ABOVE it.
Good job. :)
11. Now, click on the arrow beside those words.
12. Scroll down to the body where the blue words end and you again see the <b:skin/>.
13. This is what it should look like:
]]></b:skin>
What you're going to do next is RIGHT ABOVE that HTML, OK? :)
14. These are the codes that you're going to be using:

h3.post-title { font-family: 'FONT NAME HERE', cursive !important;}

.sidebar .widget h2 { font-family: 'FONT NAME HERE', cursive !important;}

Put the name of your font--in my case, Shadows Into Light, where it says "FONT NAME HERE". Don't erase any part of the code except for FONT NAME HERE (not even the ' '), because otherwise the code will go void. (that means it doesn't work) So it should look like this:

h3.post-title { font-family: 'Shadows Into Light', cursive !important;}

.sidebar .widget h2 { font-family: 'Shadows Into Light', cursive !important;}

15. Now, what do these two codes do, first off? The one that says "h3.post-title" is the one that controls the font of your post title, as it would suggest. This will change your post title to whatever font you just embedded into your template. (you know when I asked you to paste it into the code? Yup, you embedded it!) And the second code ".sidebar .widget h2"? That's talking about the widget/gadget titles.
16. Now you're going to paste both of those codes, WITH THE NAME OF THE FONT THAT YOU EMBEDDED, right above the ]]></b:skin>.
16. Now click the "preview template" button at the top.
17. You will be shown a preview of your template. If the post titles and widget/gadget titles are changed to the font that you went, it worked!
18. Viola! Your fonts are changed. :)

I'm still working on getting the right code for the date title, but I'll keep you updated. ;)

Hope this helped!