Pinterest Stumbleupon Whatsapp
Ads by Google

free fonts googleIf you’ve ever peeked into your font directory, you might have noticed that there’s a small group of fonts called “Web-safe”. As the name suggests, these are the saved fonts that can be safely used as web elements. But looking at this group, we can’t help but wonder about the other side of the coin – the “Web-unsafe” groups which all the other fonts belong to.

We can also conclude from the font-usage perspective, the world of web design is really a small isolated box.  This is because most of the thousands of fonts that exist today are useless when it comes to web design.

(Not So) Long Ago In A Virtual World (Not So) Far Away

In the beginning of web-time, internet users had to accept whatever font was dictated by the browser. Then Netscape introduced the <font>

tag in 1995, which basically allows web owners and web designers to play a little bit with typography.

Unfortunately, this breakthrough seems to have been a pseudo freedom as the fonts used in a web design should already be installed on the user's computer.  But how would you know what fonts your visitors have?  To be safe, web designers just use the most common ones. Thus the term "Web-safe fonts" was coined - the fonts that every web user has in their computer.

free fonts google

The possible solution to this problem is to install the fonts that we want to use somewhere in the cloud and point the design there. While this might be the best alternative today, the method still poses some problems. Mainly about the access speed and endurance of the server, and also about the copyright issues.

There are already solutions to these problems, for professionals who don't mind paying for good service, coming from companies like Typekit, Kernest and Typotheque. For everybody else, we have Google. The web giant is kind enough to provide us with Google Font Directory.

A Blog With An Attitude

If you have a blog and you don't want it to be just another face in the crowd, you can easily give it a font-lift with the help of Google Font Directory. And if you use the self-hosted WordPress for your blog, everything is so much easier because of a WordPress plugin called "WP Google Fonts".

Go to the WordPress plugin menu and click "Add New". Do a search for the Google Font plugin and WP Google Fonts will be at the top of the list. Click "Install Now" and click "OK" on the pop-up confirmation window.

using google fonts with wordpress

The plugin will be installed in seconds. Click "Activate Plugin" to start using it.

using google fonts with wordpress

WP Google Fonts "Control Panel" is located under "Settings - Google Fonts" on the WordPress sidebar menu.

Using and managing Google Fonts Directory with this plugin is very easy. The basic usage doesn't require you to mess around with codes, HTML or CSS. All you need to do is select the font that you want to use and determine which web elements you want to assign the font to.

using google fonts with wordpress

If you know your way around CSS, you can further customize the look and feel of your font by writing the codes in the "Custom CSS" box.

google font width=

And don't forget to click "Save" after making changes.

There are a total of 6 "Font Options". This means that you can use up to 6 fonts from Google Font Directory and assign them to different combinations of web elements. There's a list of all available fonts that you can find at the bottom of the page.

google font

To test drive the whole process of applying customized fonts to a WordPress blog, I did some experiments using my personal blog.

So let's compare the results. Here's my blog before applying customized fonts using the WP Google Fonts plugin.

google font

And here's what it looks like after changing the Header h1 font to "Reenie Beanie" and the body font to "Molengo". Can you spot the difference?

free fonts google

I have only practically scratched the surface here. You can do so much more customization with CSS codes. If you are really into typography, you might consider investing more time in learning CSS.

What do you think about font customization? Do you know any other easy ways to achieve this?  If so, why not share your knowledge using the comments section below?

Image credit: Typekit

  1. Tom Durkin
    November 30, 2010 at 11:53 pm

    love google fonts, have been using them fore some time now.

  2. Aibek
    September 17, 2010 at 7:47 am

    Hey Jeffry,

    Thanks for the excellent tip! I am pretty sure many people who have blogs will find this useful. It's an easy way to stand out.

  3. Aibek
    September 17, 2010 at 5:47 am

    Hey Jeffry,

    Thanks for the excellent tip! I am pretty sure many people who have blogs will find this useful. It's an easy way to stand out.

  4. Kyith
    September 16, 2010 at 12:28 am

    the fonts are all linked to googe code hosting if i am correct. so as long as the user has an internet connection they will be able to load the font. they dun have to install it on their desktop

    Kyith
    http://www.investmentmoats.com

  5. Kyith
    September 15, 2010 at 10:28 pm

    the fonts are all linked to googe code hosting if i am correct. so as long as the user has an internet connection they will be able to load the font. they dun have to install it on their desktop.

  6. Andrew Kent
    September 15, 2010 at 7:44 pm

    Yes but how does this address the visitor not having the same font installed on their machine? What will they see?

    • Anonymous
      September 16, 2010 at 3:51 am

      That's exactly the purpose of using Google Font Directory. As all the fonts are on Google server, visitors don't have to install any font in their machine and the font display will look just what the designer want it to be.

Leave a Reply

Your email address will not be published. Required fields are marked *