1.03.2011

How to Get a Cute Non-Web Font for your Blog.


Part 1: Get Set up

First thing you will want to do, is to sign up for a free webfonts.fonts.com account.

Once you have an account, you need to go to your "Project" tab, and where it says "Current Project", select "Create Project"

Now you need to add the Project Details, make sure you click "Add" next to your Publish Domain, then Click "Save Project"

Next Click on "Choose fonts".

Here, you can browse through the different kind of fonts available.  **Quick Tip: If you click on "Show free", you won't have to scroll through all the ones that say "Upgrade"

Once you have found one(or more) that you like, Click on "Add to Project".
Now we are going to "Work on style sheet".  We have to add a "Selector", the Selector that you need to add will be different, depending on the Template that you are using, so I have listed below what Selector to add for the different templates.

Minima:   .post h3
Simple:   h3.post-title
Picture Window:   h3.post-title
Awesome Inc:   h3.post-title a
Watermark:   h3.post-title
Ethereal:   h3.post-title a
Travel:   h3.post-title a

**In this sample, I am using the "Awesome Inc." Template, so I am going to use the h3.post-title a

After you type it in, click "Add selector".  Then you need to click on the pink drop-down menu, and select the font that you want (if you only picked one, then it will be the only one that has shown up)
 Once you have selected your font, you need to click on "Save changes and update style sheet".

Now, go to your "Publish" tab, and Click on the tab that says "Option 2: Advanced (JavaScript)".  It should like this:  **if you only picked one font, than there will only be one font-family listed

Now Copy the Text in the First box and go to your Edit HTML page on you blog, and paste it directly after you <head>  **it is right close to the top


Go to your Template Designer.

 and click on Advanced, and Add CSS(for the Minima Template, you can add the code here, or in you Edit HTML page)

Now we need to tell the template which fonts you want where, so below I have a list of different fonts that you can change.  In my tutorial, I am going to change the Post Title, and the Sidebar/Gadget Title. So for my example,  I need to copy the 2 lines below that work for the Awesome Inc.

Minima Template:
     Post Title:    .post h3 { FONT FAMILY HERE }
     Sidebar/Gadget Title:    h2 { FONT FAMILY HERE }
     Post and Sidebar/Gadget Main Text:    body { FONT FAMILY HERE }
     Header/Title of Blog:    #header h1 { FONT FAMILY HERE }
     Header Description/Blog Title Description:    #header .description { FONT FAMILY HERE }

Simple Template:
     Post Title:    h3.post-title { FONT FAMILY HERE }
     Sidebar/Gadget Title:    h2 { FONT FAMILY HERE }
     Post and Sidebar/Gadget Main Text:    body { FONT FAMILY HERE }
     Header/Title of Blog:    .Header h1 { FONT FAMILY HERE }
     Header Description/Blog Title Description:    .Header .description { FONT FAMILY HERE }

Picture Window Template:
     Post Title:    h3.post-title { FONT FAMILY HERE }
     Sidebar/Gadget Title:    h2 { FONT FAMILY HERE }
     Post and Sidebar/Gadget Main Text:    body { FONT FAMILY HERE }
     Header/Title of Blog:    .Header h1 { FONT FAMILY HERE }
     Header Description/Blog Title Description:    .Header .description { FONT FAMILY HERE }

Awesome Inc. Template:
     Post Title:    h3.post-title a { FONT FAMILY HERE }
     Sidebar/Gadget Title:    h2 { FONT FAMILY HERE }
     Post and Sidebar/Gadget Main Text:    body { FONT FAMILY HERE }
     Header/Title of Blog:    .Header h1 { FONT FAMILY HERE }
     Header Description/Blog Title Description:    .Header .description { FONT FAMILY HERE }

Watermark Template:
     Post Title:    h3.post-title { FONT FAMILY HERE }
     Sidebar/Gadget Title:    h2 { FONT FAMILY HERE }
     Post and Sidebar/Gadget Main Text:    body { FONT FAMILY HERE }
     Header/Title of Blog:    .Header h1 { FONT FAMILY HERE }
     Header Description/Blog Title Description:    .Header .description { FONT FAMILY HERE }

Ethereal Template:
     Post Title:    h3.post-title { FONT FAMILY HERE }
     Sidebar/Gadget Title:    h2 { FONT FAMILY HERE }
     Post and Sidebar/Gadget Main Text:    body { FONT FAMILY HERE }
     Header/Title of Blog:    .Header h1 { FONT FAMILY HERE }
     Header Description/Blog Title Description:    .Header .description { FONT FAMILY HERE }

Travel Template:
     Post Title:    h3.post-title a { FONT FAMILY HERE }
     Sidebar/Gadget Title:    h2 { FONT FAMILY HERE }
     Post and Sidebar/Gadget Main Text:    body { FONT FAMILY HERE }
     Header/Title of Blog:    .Header h1 { FONT FAMILY HERE }
     Header Description/Blog Title Description:    .Header .description { FONT FAMILY HERE }


Paste the ones you want into your Add CSS page, like so...

Then, you need to go back to your Web Fonts account, and Copy the fonts that you want to use.  Make sure to copy the WHOLE line.


Now go back to your Add CSS page, and paste the fonts into the place where it says FONT FAMILY HERE.  Now it should look something like this:

Now just Click on Apply to Blog and you're done!  Now I have a Cute font for my Post Titles, and a different one for my Sidebar Titles.

10 comments:

  1. Thanks, Carolynn! I'll be seeing if I can do this over the weekend.

    ReplyDelete
  2. It looked complicated when I first read this post BUT I ended up doing it and it came out great. Thanks for the great info!

    ReplyDelete
  3. hello . how i want to change post font ? i have try but i can't get it . can you help me ??

    ReplyDelete
  4. hahahaa ancur dah...
    hue gak mudeng bahasa inggris.ckckkc

    ReplyDelete
  5. Thank you so much for posting this. It is laid out so well and easy to understand. Thanks again!!

    ReplyDelete
  6. I tried this twice word for word and it never turned out right.

    ReplyDelete
  7. please help me, it doesn't work in my blog! *I'm using awesome inc template

    ReplyDelete

Related Posts with Thumbnails