How To...

So, I've had an itch to redesign my blog.

"No duh!" right? Right.

I changed the title and date fonts (which is easy and I can show you how to do if you'd like), and that got me thinking "Hey! Why can't I change the boring old font that makes up the bulk of my blog?"

That, in turn, led to hours upon hours of research. I stumbled across the 'bomb.com' jack-pot of new fonts from Google. Go Google! Check 'em out here. You know you want to.... Don't deny it =]

Falling in love with a font was the easy part.

The hard part turned out to be what everybody else in the world said was the easy part. I nearly exhausted Google's kick-butt search engine trying to understand what I needed to do to get this working.

I kid you not-- HOURS. My eyes were going to fall out of my skull. They still are. That's saying nothing of my poor tailbone.

Then in walked my husband from spending an equal amount of time shoveling ice from our driveway. He had heard me whining about not understanding HTML mumbo-jumbo all day long... soooo, I worked my magic and batted my eyelashes a little and commandeered his services. It took him about 10 minutes (max) to find the web page that filled us in on what we were missing.

I wont waste any more time telling you about how freakin' impossible this was. I'll just tell you how to do it. You can thank me later.

1. Go to the site I linked up above and find a font you love. In case you missed it or you're too lazy to scroll up, here it is again. Right here. Yeah. Right there. Nope. Over there.

2. Click on the nifty "Use This Font" tab that's bright blue.

3. Copy the link it provides you. The one that begins with the word 'link'. 

4. Log into your blogger account and click on "Design". Then click on "Edit HTML" that is hiding under the tabs in the top left-hand corner.

5. Don't panic if you've never edited your HTML. Just don't let your dog sit on your laptop while you're editing it or you'll wish you were dead. Click "Download Full Template" before you touch anything. THAT way, if your dog DOES sit on your laptop, you can revert back to the original with no tears shed.

6. Now type "Ctrl-F". It's your best friend. Trust me. In the search box that pops up on the bottom of your screen, type this: < / head > (without any spaces). That will highlight the corresponding word in all that HTML mumbo-jumbo.

7. Just above that, paste the link you got from the Google site.



8. Now add a /  right after the 'text/css' that you just pasted. It should look like this now:

< link href='http://fonts.googleapis.com/css?family=Mountains+of+Christmas' rel='stylesheet' type='text/css'/ >



9. Save your template. 

10. Now you have to decide where you would like that darling font to be applied. This is the part that was super duper confusing because no one in the entire world explained it good enough. You had to know what you were doing in order to understand. I did NOT know what I was doing. So I will help you, my dear friends. Let me help you.

11. If you want it to be applied in all of your posts (in short, if you want to see that darling font pop up every time you publish a post), type .post in your "ctrl-f" box.  If you want it to be applied on all your sidebar stuff, type in .sidebar. If you want both, that's just dandy. Just do them one at a time =]

12. Now, if you typed .post, you should see something like this:


.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }


Good deal. That's what you should see. Take a deep breath. 

13. Directly under .post { , type font-family: 'INSERT THE NAME OF YOUR DARLING FONT', arial, serif;
It should look like this when you're done: 

.post {
  font-family: 'Mountains of Christmas', arial, serif;
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }

14. Directly under font-family: , insert font-size: 16px . You can choose whatever font size floats your boat. 
It should look like this now:

.post {
  font-family: 'Mountains of Christmas', arial, serif;
  font-size: 16px;
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }

15. Save your template.

16. View your template.

17. Do a victory dance. 

If you need to know how to apply this all to your sidebar or if you want to apply more than one darling font, just ask me. I'll be more than happy to explain that to you. It's a piece of cake once you get the concept down!  Enjoy your cute fonts, everybody!