I love fun fonts!!!  Love em, love em, love em!

I even break “rules” with fonts.  I don’t care, because I think life is just more fun with something pretty or cute to look at.

Hopefully, you have already downloaded some amazing fonts and have been using them to your hearts’ content, but Kristi {from CreativeKristi.com} is here to give us the lowdown on using google webfonts!

Kristi is the super cool chica who bailed me out in a major way in my moving from blogger drama.  I owe her BIG TIME!!

After my big move, she also offered to set me up with a cool scripted font for my sidebar titles instead of using an image for them.  I love it!  Now I can change things up on the sidebar so easily without having to go create another graphic sidebar title!

Take it away, Kristi!

Hi all! I’m so excited to be here today sharing with you all how to add custom fonts to your blog!

I recently had the pleasure of moving Renee over from blogger to wordpress & we decided on a custom font for her to use–she asked me then if I would be willing to write a post about it since she does all of her own graphics & customization of her blog and knows how much her readers enjoy those “DIY” posts!

I made a little video to show you how to add it to your blog if you use self-hosted wordpress with either the Headway or Genesis theme.

Steps for adding a font to Headway theme on WordPress:

1. Visit google.com/webfonts and choose a font you like.

2. Click on “quick-use” on the font you like.

3. Copy the code that is in the “standard” tab on step 3 of the font page.

4. Visit your blog’s dashboard and click on Headway–>Configuration–>Scripts & Analytics.

5. Paste the code at the top of the “Header Scripts” section & save.

6. Go back to Google Webfonts and copy everything after “font-family” in step number 4 on the font page.

7. Back on your wordpress dashboard click on Appearance–>Custom Functions. Use this code (replacing the red parts with your font specifics):

headway_register_custom_font(‘FONT NAME‘, ‘FONT NAME, cursive’);

If your font has something other than ‘cursive’ in step four on Google webfonts then replace the word cursive with whatever that font has. Click save. It should now appear as a font-option in Headway Visual Editor.

Steps for adding a font to Genesis theme on WordPress:

1. Visit Google.com/Webfonts

2. Click on “quick-use” on the font you’d like to use.

3. Under step 3 on the font page click on the “Import” tab and copy the code that is there.

4. Go to your wordpress dashboard and click on Appearance–>Editor. Make sure you are on the style.css section & paste the code at the very top. Click Save.

5. Go back to the font page on Google WebFonts and copy the code in step 4.

6. Back in your style.css section of your blog find the portion you want to change the font for (Post title, widget, etc) in the code and paste the font-family code there. Save.

Blogger & WordPress.com have web safe fonts built in-on blogger it is free on wordpress.com you must upgrade with the $30 per year custom design upgrade.

I hope this was helpful & let me know if you have any questions!

Thanks Renee for having me!

  Kristi writes her own personal blog, Creative Kristi, on topics such as DIY, crafts, sewing & blog tips & tricks. She gives away freebies      & tries hard to “Spread Bloggy Love“. She is a graphic & affordable web designer at Creative Kristi Designs.

THANKS SO MUCH Kristi for sharing this great tip while I am on my way out of town!  I’ll be seeing Kristi shortly at the fabulous Haven Conference!  Woot!