Customizing Typography with Google Font Previewer

By Chelsi Nakano (@chelkano) Jul 29, 2010

Want to know how a typeface will look before adding it to your site? Google's new Font Previewer gives you a visual as you tinker with the look and feel of a font, then sits out a block of code for some easy copy and paste action:

Google Font Previewer, with creepy dialog from tinywatchproductions' TweetFired

Web Fonts haven't always been this easy, of course. Back in May, another attempt from Google came in the form of a Font Directory and the Google Fonts API. Together, these tools aimed to simplify the embedding process, as well as provide a wider range of fonts choose from.

The cross-browser solution wasn't as robust as offerings from competitors, but that it's comprised of open source fonts makes up for it. The Google Font Previewer cuts out even more fat by putting all the tools you need in one location. With the tool you can adjust the font's size, weight; leading, tracking, and even drop shadows if that's the look you're after. You can also click 'Toggle controls' if you'd like to see the sample text by itself:

When you're finished, a dynamically generated code will be provided just under the preview. Copy and paste it into your CSS and voilà! You've got a customized font.

It looks extremely useful, but try it out here and let us know if you run into any bugs.