Pinterest Stumbleupon Whatsapp

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

Leave a Reply

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