take me backWhat is Google Font API?

Despite the constant progress in web development and it's technologies, there's still one simple area that lacks and until now, has always frustrated me.  What am I referring to?  Web Typography!  Although there potentially thousands of typefaces to choose from, unless you have them installed on the computer you are reading this blog on (and chances are they're not), as a Web Designer/Developer, I can't use them which frustrates the hell out of me.

Enter our saviour, Google Font API!  Why somebody didn't think of this earlier beats me, but Google have very kindly introduced Google Font Directory and Google Font API, a free web service that allows web sites to display and use other fonts, high quality open-source fonts, outside of the safe fonts that are common place.

Why use Google Font API?  If you have a web site that you think would benefit from a slightly different font, then Google Font API is the perfect solution. Instead of using images, @font-face is a much more SEO friendly solution and it's unobtrusive meaning that you don't need to update your existing content, just the CSS file.  Also, using Google's servers means you're off-loading your servers work to to dish up the CSS, over to Google's reliable infrastructure.

To use the Google service, you simply browse the Font Directory (which will undoubtidly grow in size), and find the font that you would like to use.  Once found, you simply add a link to your CSS file:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

Then just use the new font in your CSS file.  Note that I've also used a fallback font just in case.  This is known as font stacks.

p {

 font-family: 'Font Name', serif;

}

For my latest "fun" project, www.PredictFootyResults.co.uk, I employed this technique and used the font of 'Droid Sans'.

Further reading can be found here on Google's official pages.

Comments are now closed