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

January 3, 2011 17 Comments

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.

Filed Under: Custom Blog Design, Custom Blog Design Tutorial, DIY, Easy, Easy Tutorials, Fonts, Intermediate Tutorials, Links, Minima, New Blogger Template Tutorials, Posting, Sidebar Titles, Tutorials

Get Yourself Out There!

October 22, 2010 2 Comments

This is a pretty obvious topic for SEO, but I had to touch on it and maybe I can point out a thing or 2 that can help.  When I do designs for people, I get asked SO often, “How do I get people to see my blog?”.  Well, that is the question, how do we get people to see our blogs, and not just anyone, how do we get relevant, interested readers?  Below is a list of some ideas to get you started (no specific order).

Advertise
Advertising is the FASTEST way to get your name out there.  Obvious I know, but it really can pay off!  Make sure that if you are looking into advertising, that you really do your homework though.  There are so many options out there, and blogs out there.  How do you pick one that will benefit your blog the most?

First, make sure that the readers of the blog or website that you want to advertise on, are the readers that you are looking for.

Second, check or ask for the blog or website’s statistics.  Make sure that they get enough traffic to send you traffic.  Important: When you are looking at statistics, look at how many unique visitors that they receive daily, don’t let them only give you the number of impressions that they receive each day.  The difference is that “impressions” stand for the number of times that the blog or site is seen (1 person could “see” the website 20 times, by clicking from post to post, or even a simple refresh of the page).  “Unique Visitors” stands for the number of individual people visit that site per day. 

If you are flat out broke…. like me :)  Don’t stress, there are plenty of other ways to get out there, but advertising is hands down the fastest, easiest way to do it.

Make Friends
Reach out to the people that you think would find your blog interesting.  If your blog is about sewing, try to reach out to every sewer, crafter and person that you think would benefit from reading your blog.  Here is a quick list of places and things you can do to reach out to potential readers:

  • Blogs – Find authors of other blogs that are similar to yours, read them, comment on them.  I am not saying, go out and try to steal other peoples readers, make relationships with other bloggers that may find your blog interesting, but genuinely do it.  I don’t know about you, but it really bugs me when people just leave me a comment and throw their link in there, just to attempt to boost their rank in a search engine.  So don’t just superficially comment and buddy up to people (that is just annoying and a waste of your time), find people that you really like, and really read their blogs.  More times than not, if you develop relationships with others, it is a you pat me on the back, and I will pat you on the back.
  • Forums – Forums are awesome!  Find forums on your topic, they are a fabulous way to meet people that share common interests.  If you are an “expert” in your topic, forums are a perfect place for you to answer other peoples questions and send them to your blog.
  • Social Networking – Facebook, Twitter, Blog Frog, Bloglovin’ and on and on.  These can make or break your blog, this is another way to get on a more personal level with your readers (notice a theme – develop relationships)
  • Craiglist.org – This one, works for some and not for others.  If you ofter a local service (photography, etc), then YES, it is a must.  Craigslist also has discussion forums, community listings, and more.
  • Directories – I couldn’t even begin to list all of the directories out there (http://www.blogguidebook.com/ , http://www.themomblogs.com/ , etc… I will have to put together a list some time for you)
  • Email Signatures – This one is easy to not even think about.  Make sure that your link is on ALL your emails, you never know what relative (or anyone) that will be curious and click on it, and if you are lucky, pass it along.
  • More – I am sure you can find more.  Google your topic, dig deep, find out where your readers are and contact them.

Get to Know Your Readers
When you do start getting readers (assuming that you are just starting out), keep them!  How?  If they comment, comment back.  If they follow, follow back.  If they email you, email them back.  Get my drift.  If you take the time to get to know your readers, you will be able to have that long lasting relationship that keeps your readers coming back.

Along with getting to know your readers, make sure that you let your blog evolve with your readers.  Don’t be afraid to let your blog change with your readers, isn’t that the goal, to have a blog that people want to read?

Filed Under: Blog Tips, Blogging Friends, Linky Love, Posting, Search Engines, SEO, Social Networking

How to do Expandable Posts in Blogspot

September 15, 2010 8 Comments

I was trying to clean up my site the other day, and I hadn’t even realized that blogger’s new posting editor allows you to condense your posts on the main page and click on “Read More” to read the rest of the article.  It is a fabulous way for your readers to be able to find what they are looking for more easily, with out having to scroll down long articles.

The new tool offered is called the Insert Jump Break tool.  This is what it looks like:

Here is how you post and use the tool:

If you do not see this toolbar, it is probably because you are still using the old editor.  To get the new editor, go to your “Settings” tab and “Basic”.

Scroll to the bottom and make sure that “Updated Editor” is selected.

And there you have it Condensed Summary Posts that are expandable!

Filed Under: Condensed Posts, Custom Blog Design, Easy Tutorials, Expandable Posts, Jump Break Tool, New Blogger Questions, Posting, Summary Posts, Tutorials

To the Top