Google has once again given an excellent new tool to designers and developers (and even CSS-savvy “common folk”) who long for better, more diverse typefaces on the web: a cool Font Previewer that makes adding a new font to your site as simple as copy/pasting a few lines of code.
Back in May, Google rolled out its Font Directory and the Google Fonts API. The idea was that these tools would make it simpler for designers and devs to embed a wider range of fonts in their sites and applications.
The previewer takes a few steps out of that process by giving you an idea of how a given typeface will look on your site; letting you adjust the font size and weight; letting you tinker with the leading, kerning and tracking; generating a number of drop shadows if you require them; and generating the code you need to make the magic happen.
It’s pretty hot. Here’s what it looks like:
If you click “Toggle controls,” you can see what the typeface looks like sans-grid, sans-controls on a plain white screen.
Once you’re done tinkering, you’ll see a dynamically generated code sample beneath the preview area. Your code will look something like this:
Then, just copy and paste the stylesheet link and the CSS into your pages. That’s it; you’re done, and your site has a lovely, interesting new font. We tried it out ourselves, and it worked even better than expected.
Give the Font Previewer a try, and let us know what you think in the comments. We’re particularly interested to see if any of our readers can find bugs in this new tool.