Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Quick Tip: Instantly Preview Google Fonts in Chrome

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

With the release of the Typecast public beta comes the next step in the wonderful evolution of web fonts. One of (if not the) biggest web font service is Google web fonts. With over 500 font families that can be used without cost or limitation it offers a truly remarkable service. Let's look at a quick way of previewing Google fonts, without having to actually implement them in your projects.


The fonts offered by Typekit, fonts.com, or high end foundries may be of a higher quality in terms of design and practicality, but the barrier for using Google web fonts is much lower. You don’t even need a Google account to sign up.

One problem with using web fonts however, is testing different examples in your own projects. Whereas you can just set a different font stack with regular fonts, a web font requires a snippet of javascript (or an additional stylesheet) to load the assets. This can be a pain if you want to try various different web fonts in quick succession.

Enter the Google Font Previewer by Pamela Fox! A remarkable little Chrome extension that lets you preview all Google web fonts, on any site. All it asks of you is the css selector for the block of text you want to preview.


Watch the Quick Tip


Feel free to download the video or subscribe to Webdesigntuts+ on YouTube..

The extension also lets you set the text size, text-shadow and some other transformations in the preview. It would be great if you could select other web font services as well, just like you can in Typecast, but for now this is a fun and practical little alternative.


Resources

Advertisement