Google enters web type game with Google Font API

Google Font LogoType on the web has been a subject of great interest to web developers and designers for many years. For the most part, we’ve been stuck with the default serif and sans-serif fonts that come with operating systems such as Arial, Georgia, Verdana and so on. These fonts have worked okay, but compared to print, it was difficult to easily create compelling typography on the web.

There are ways to do interesting type on the web. I’ve tried many font solutions for the web, including sIFR, Cufon, and TypeKit. Now, Google has entered the web fonts game with their Google Font Director and Google¬†Font API.

Of all the solutions out there, I’ve found Google’s to be the easiest and fastest to implement. All you need to do is call Google’s special CSS file with the font you want to use, and add it a call to the font in your CSS file. That’s it. Seriously. I changed the H1 tags on this site using Google’s method and it took less than a minute from start to finish.

Google has launched their offering with 18 fonts – both serif and sans-serif in a variety of weights. If you’re going for a more serifed type like Georgia or Trajan, you may be interested by the OFL Sorts Mill Goudy or Old Standard TT. If you need a sans-serif type, there is Yanone Kaffeesatz, Molengo and Cantarell.

To get started, you select the fonts you want to use (one or several), the font weight(s) you want, and then call Google’s CSS. Here’s an example:

<link href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light" rel="stylesheet" 2="type='text/css'>

That code will call only Josefin Sans Std Light. If you’d like additional fonts, you can tack them on. In your CSS file for your page, you call the font this way:

h1 { font-family: 'Josefin Sans Std Light', arial, serif; }

And that’s it. You aren’t limited to just headers, you can apply a special font to any tag you like.

Google has a nice font previewer that you can use to not only see what your text will look like, you can also apply some CSS effects, such as transforms, decorations and letter/word spacing to see the effect on a particular typeface. What’s also nice is Google will give you the appropriate CSS for the exact look and feel you like. Here’s an example:


body {
  font-family: "Lobster", serif;
  font-size: 63pt;
  font-style: normal;
  font-weight: 400;
  text-shadow: none;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0em;
  word-spacing: -0.058em;
  line-height: 1;
}

It will be interesting to see if Google adds more typeface choices over the coming months.