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.
All the fonts in Google’s library are open source. Previously, Google’s Font API could be integrated into websites using HTML or a JavaScript WebFont Loader that the company co-developed with Typekit.
No comments:
Post a Comment