Awesome up your site with Google Fonts for WordPress

A good font should not be underestimated when it comes making your site look not just good, but polished, defined and unique.

There are the usual suspects to choose from such as ‘Ariel’, ‘Vendana’, ‘Times New Roman’. However, sometimes though you may feel you need something a bit more unique. A font perhaps to help raise your sites presence above the other hoards of websites all vying attention. This is where using a non default font can come into its own, by helping to make things look a bit more special and different.

Houston, we have a problem. The fonts are all local sir!

A quick search around will reveal many web sources that you can use to download new fonts to your machine, but the problem with the standard form of font delivery is that the font is rendered locally on your PC, Laptop, Smartphone, iPad etc,  but not everyone else’s!

For example if an application such as Microsoft Word asks for the ‘Ariel’ font then ‘Ariel’ is pulled out from the local drive and then fed to the application (in this case ‘Microsoft Word’). For example, on a Windows 7 machine ‘Ariel’ would be loaded from Control Panel\Appearance and Personalization\Fonts, on a Mac it would be <user>/Library/Fonts.

It is also the same for any other application that requires font including Web Browsers.  So if you declare an exotic font in your themes style.css such as ‘Showcard Gothic’ it may well work on your own laptop as you downloaded ‘Showcard Gothic’, but everyone else who is missing the font on there local drive will fall back to plain old ‘Times New Roman’. The reason for this is your Browser (Firefox, Chrome, Safari) see’s ‘Showcard Gothic’ in the style.css file and then looks for that font locally on the the users machine. It won’t of course find it (unless under the rare chance the new user had downloaded the font).

Windows 7 Local Font Directory

Google Web Fonts

So, there is a way around this locally stored font issue and its all thanks to those clever souls over at Google. What they have done is collected a big database of fonts, but more then just that they have provided an API which can be called upon to download the font in realtime and show it within the users browser.

That sounds cool, but what is an API?

An API is an ‘application programming interface’. Its typically a way of making a program accessible to elements outside of the program itself, i.e. other people can send simple commands to the program, and then they get to use all the cool stuff it can do. Facebook, Google and all the big players provide these. For example you know that facebook app you have on your iPhone? Well that pulls down data by using the Facebook API.

So with Google Web Fonts your wordpress theme can call down from the Google API a font of your choice and then in real-time and send that font to the person browsing your website. This way it insures that everyone sees the same new, funky unique  font! You also don’t need to be concerned about the page speed as Google have some beastly god mode servers online to dish out the fonts.

So, how do we this then?

The first port of call is the Google Web Fonts site itself

http://www.google.com/webfonts#ChoosePlace:select

Start off by browsing the selection until you see a font you like.

For this tutorial I am going to go with ‘Condiment’ , so I hit the button named ‘Add to Collection’ as shown below.

Googles Web Font Selection Page

Next, select ‘Use’ and then scroll down the page and copy the sections ‘3’ and ‘4’ shown below and keep them for a little bit later on.

Populating the code

So lets try this out and see how it works

Open a text document on your computer and paste in the following code:

Save the file as ‘testfont.html’ and then open the ‘testfont.html’ within your browser – wala!

What happened here is your browser downloads the Google Web Font and renders it for your own private viewing pleasure, oh er sir!

How to import this all into wordpress.

The first step is we need to import the link href into our header.php file. So for this example our code is:

This needs to be placed within the <head> tags, the best place is right after the opening tag, as follows.

Within the wordpress admin dashboard select:

Then on the right select ‘header.php’ and paste in the code as shown.

Next we need to ‘call’ the font from within the stylesheet, so staying within the same editor page click ‘style.css’ from the same area as we found ‘header.php’

Find the section of font you wish to change, for example for the main body (post text) we would change the entry to ‘Condiment’:

From here you can also change the font for your headings by seeking out the relevant section in your style.css.

So lets see the result

 

Voila! There we go, you now have a new sexy font that everyone can see.

* UPDATE:

Well it turns out after typing all that out I found that someone has developed a really cool plugin to do all the work for you!

The name of the plugin is ‘WP Google Font’s and its by a guy called ‘Adrian3′

This plugin does all the code work for you, you just need to select the font you want from a drop down list:

Tags: css, font, Google Web Font, Wordpress

Category: Design