Web Typography Made Easy With Google Font Preview

Last week Google announced on their Coding Blog, that they had launched the Font Preview tool, a new feature for the Google Font Directory. The Font Preview is a great resource for web designers and developers who want to use a wider variety of typefaces on their sites.

The Google Font Directory lets you browse through all the fonts available via the Google Font API. All fonts in the directory are available to use on web sites under an open source license and hosted on Google servers.

When you visit the Font Preview page, you’ll see the tool interface is very simple. In the control panel on the left, drop down boxes let you choose the font family, variant and shadows, while sliders let you set the font size, decoration, case and letter, word and line spacing for your text. The preview pane on the right-hand side shows the preview of the typeface with any styles you may have applied. Beneath the preview grid the CSS is created on the fly.

Interface

If you click “Toggle controls,” you can see what the typeface looks like without the grid and the control panel on a plain white screen.

Toggle Controls

When you toggle back to the grid view, you’ll see a dynamically generated code sample beneath the preview area. You can then select, copy and past the CSS.

CSS

The number of fonts currently available in the font directory is somewhat limited, but presumably will grow fairly rapidly. The Font Previewer makes it very easy to create the CSS for your fonts and simply copy and paste them into your pages.

typefaces

A sample of some of the open source fonts available through the Google Font Directory.

Have you tried the new Font Previewer? What did you think about it?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • TimeNomad

    Great, less headache in trying out different fonts!
    Limited set of choices though, but I guess this is something time will solve.

  • Gespinha

    Its definitely great, now we know that, as long as Google exists and this database as well, we have a library of some other available online fonts to use.

    This releases us from having to dynamically upload fonts on our domains in order to give our clients the perfect experience of our work.

  • Andrew

    There is similar functionality available (along with a much wider selection of fonts – albeit for a price) at http://www.fontslive.com and the soon to be http://www.webtype.com.