Using Custom Fonts on Web: Google Web Fonts

The concept of web typography has taken a revolutionary turn in the past year and about time too. For designers it was quite a frustrating experience when it came to typography in web design – and I remember my dismay a few years ago when I was taking a web design course at art school and was advised to only use the default fonts that the browsers offer. If it wasn’t a Flash based website we were designing then we had to embed text into images as there were only a few services available at the time to use a custom font on a web page, and most of them were either too slow or inefficient.

When thinking about print design and how typography upped the game, it seemed like we were taking a step back with web design. Its no small challenge when thinking about typography and web design – with print your format is fixed, with web and mobile usability is a major consideration and then there’s always options to zoom, readability and navigation which have to be carefully thought about when thinking about size, contrast and usability.

Nowadays there are lots of services you can use to embed custom fonts on a website. They all have pros and cons, some of them are free, and some of them require monthly subscriptions or annual fees. I’ve cross-examined the most popular services in-depth but more about them later – here’s a quick overview of what options there are with Google when it comes to typography in web design.

Google Web Fonts

Google Web Fonts

The ever-expanding enterprise that is Google, lets designers and developers use their font database via the Google Web Fonts API. On the Google Web Fonts web site; all fonts are listed in a directory, from which you can choose and download the font of your choice or get the embed code to easily implement the typeface on your site. The directory gets bigger everyday but for now it appears to be a little limited in terms of professional fonts and font families that some other services offer such as Typekit or Fonts.com.

Usage

The process is really simple; no sign-up, just check the directory, and find the fonts you like, either download to see in use on a Photoshop file, or get the code straight away. The code you get for a one-variant font looks like this:

<link href='http://fonts.googleapis.com/css?family=Cabin&v1' rel='stylesheet' type='text/css'>

If you paste this code into the part of your html; you can use the font in your CSS font stack, for example:

h1 { font-family: 'Cabin', arial, serif; }

The fonts used from Google Web Fonts API load pretty fast on the website and the API supports 98% of browsers right now (including Mobile Safari for iPhone & iPad, cheers). There are numerous plugins that integrate web fonts into WordPress, but with Google Web Fonts you don’t need to rely on a plugin – basically all you need to do is add the stylesheet which is hosted in Google servers to your <head> section then edit your layout stylesheet.

Font Selection

Right now, there are 175 fonts and font families on the directory, and Google are aiming to build a library of up to a 1000 fonts within the next 12 months (@googlefonts). The selection seems limited compared to sites like Typekit and Fonts.com which have thousands of fonts and most of them by type foundries. Most of the fonts on Google Web Fonts are substitutes or look-alikes of some professional fonts (i.e. Rokkitt and Rockwell).

One good point is that Google serves the fonts under an open source license, so there is no problem when using any of the fonts on commercial sites as such. We are using some of them on Theme.fm as well. :)

The ease of the implementation, and the open source license that Google provides for the fonts, make it a great option. If you’re looking to use custom fonts on a website, be sure to check Google Web Fonts directory first before you pay for another service.

Google now boasts about 110 million font requests per day and is used on about 1.29 million unique domains although this is still a small share of the website market – so its still growing and to be honest I’m surprised its still not more widely used which is why we thought we should add a little something on Theme.fm about it.

Google Web Fonts version 2 is expected soon although no date has been given yet and Google plan to offer better search options and 3 preview options including sentence view, letter view or paragraph view. You’ll be able to choose, review and preview different fonts to compare and rearrange the fonts in the preview options. For me this is really exciting as Google are really starting to think more about what designers and developers want and looks like they’ve even thought about how to communicate the payload.

What about mobile – Google have even thought about rendering for mobile devices – so they’ve rolled out an optimisation which detects when you’re on a Mac or an Android or iOS device and serves an optimized version of the web font.

I’d like to say we’re there with typography and web design, but there are still many steps to go before we can really see the game change for the better — in the meantime every small step seems to be a leap these days which is a good thing for us!

So, how do you handle your typography in web design? Do you use Google’s Web Fonts or others? Share your experience in the comments below!