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?

Jennifer Farley is a designer, illustrator and design instructor based in Ireland. She writes about design and illustration on her blog at Laughing Lion Design.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • 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 and the soon to be

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.