Google Makes Custom Web Typography Ridiculously Easy

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, GoogleGoogle 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.

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.

Cet article a été publié dans Uncategorized. Ajoutez ce permalien à vos favoris.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s