Line25

Easy Custom Web Typography with Google Fonts API

Posted: 21 Jun 2010 12:00 AM PDT

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

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.

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.

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.

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.

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

View the Google Font API demo