Line25

Easy Custom Web Typography with Google Fonts API

Read the full post

The world of web typography is advancing with leaps and bounds. Already we have the options of SiFR, Cufon, Typekit, @font-face and now, Google has introduced their own custom font service under the Google Font API. Let’s take a look at what the Google Font API is and how you can use it in your own web designs.

View the Google Font API demo

View the Google Font API demo

How it works

The Google Font API is basically a shortcut to manually using the CSS3 @font-face property. When you insert the Google code in your website, the Font API returns a stylesheet including an @font-face rule for your chosen font, it might look a little like this:

@font-face {
  font-family: 'Reenie Beanie';
  font-style: normal;
  font-weight: normal;
  src: local('Reenie Beanie'), url('http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0') format('truetype');
}

The difference is, Google will do all the hard work in getting the font to work in non-CSS3 browsers such as Internet Explorer.

Advantages

The Google Font API is one of the most easy to use custom web font solutions out there. With just a line of code you’re ready to import a range of custom fonts from the Google Font Direcory.

The Google Font API works like a charm in most browsers.

The Google Font Directory includes a range of tasteful and stylish fonts to choose from, as well as a selection of more decorative options.

All fonts are released under an Open Source license, so the Google Font API can be used in both your commercial and personal projects.

Text rendered using the Google Font API is still selectable, which is one drawback with some solutions like SiFR.

The Google Font API doesn’t rely on Javascript, so the customised fonts still show if the user has Javascript disabled.

Because the fonts are rendered with good old CSS, any additional styling such as the CSS3 text-shadow property can be added.

Disadvantages

Despite having a few nice options in the Font Directory, the choice is fairly limited. However you can tie the Google Font API with Typekit using Javascript and the WebFont loader to open up further font options.

Most browsers will load the rest of the page before rendering the font. This may leave a blank space, or the fallback option until the page has been completely downloaded.

It’s not supported on mobile browsers such as the iPhone, iPod or iPad webkit browser or Android.

Enough blabber, how do I use this thing?!

Google Font API directory

Head over to the Google Font Directory to browse the catalog and pick out the font of your desire. I’m going to use the IM Fell DW Pica SC variant of IM Fell and Reenie Beanie.

Google Font API code for IM Fell

Click the Get the code tab and copy the CSS stylesheet link.

<title>Custom Fonts using Google Fonts API</title>

<link href='http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC' rel='stylesheet' type='text/css'>

</head>

Paste the code in the head of your web page.

h2 {
	font-family: "IM Fell DW Pica SC", Georgia, Serif;
}	

In your own CSS stylesheet, add the name of the font as specified by Google to your font stack in quotation marks. Follow this up with backup options.

View the Google Font API demo

Render your web page and see your custom web typography in all its glory!

View the Google Font API demo

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

22 Comments

  1. Jay tyler says:

    Even if not supported by Google this does work perfectly on iPod, iPad and iPhone.

  2. Nice one Chris! I didn't even know about Google Fonts API prior to this article.
    While I don't think this is going to be the standard way to get custom fonts working it is a great way to quick and easy way introduce more nuance into your web design.

  3. blurkness says:

    great tut ;)

    very helpful

    thxalot! :D

  4. andrei says:

    your demo is missing part of the second sentence ?

  5. chris says:

    Great timing. Just about to get started on typography options. Thanks for another good tut.

  6. Alan says:

    Nice stuff, a little more in-depth that the other few tutorials i have seen on this.

  7. uncle tedd says:

    nice!! google really rocks!!

  8. WMC says:

    Wow! it realy helps.

  9. SEO Divers says:

    Thanks Chris, I've been waiting to read up more about this

  10. Thanks for the information. I have been looking for some new fonts and now I know where to go to get them.

  11. Moi says:

    When I open that Bruce Lee quote the part which says "Willing is" is invisible (if I copy and paste the text it copies fine).

    I'm using Chrome 5.0.375.70 on Windows XP.

  12. DSM Design says:

    Awesome post! Cheers for the heads up :)

  13. Lars says:

    I'm already using it. Hope it will be permanently available and get some more fonts in future.

  14. csssample says:

    Excellent Article, Keep posting like this

  15. Stephan says:

    Thanks!
    I'll give it an try soon.

  16. I have been using typekit since it launched, but I think it's cool that Google are now involved with web fonts. They might not have the quality of type foundry's that typekit have, but one thing is for sure… they will provide a rock solid base to serve the fonts from.

  17. Johnybyrne says:

    Oh my!!!! I did not know about the Google Fonts API. Thank you so, so, soooo much for this article. As ever, you are an essential source for progression and inspiration for the design community :-)

  18. Dan says:

    Great tutorial, but I wish there had been more focus on the disadvantages. I feel the limited choice, and more importantly, the page render before the font properly displays to be enough of a hindrance to find this technique useless. It simply seems unprofessional.

  19. Jennifer R says:

    Well it looks good but I can only use the font in the Google library?

  20. Alex says:

    It's not Bruce Lee who said the example quote, it is von Goethe. Nice try Mr. Reveal-my-readers'-open-mindness-abilities ;)

    http://www.brainyquote.com/quotes/quotes/j/johannwolf161315.html

  21. @Jay this does not work perfectly on the iPhone or the iPad, and on the iPhone 4 some of the fonts don't work at all.

    Also, a lot of these render terribly on Windows.

Sorry, comments are now closed