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.


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.


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.


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?