Decoding Web Fonts With ‘What Font’

What Font shows you which font a webpage is using

Designers have been bemoaning the state of typography in the browser since the dawn of the web. However, CSS 3 and the @font-face rule go a long way toward improving your font options. Throw in tools like lettering.js and easy-to-use font services like TypeKit and it’s not hard to turn your site into something from a typography nerd’s fantasies.

The days of only six font choices on the web are, thankfully, well behind us. Now you can choose from hundreds of fonts, whether you embed your own or use a service like Typekit. We see gorgeous typography on different sites everyday and sometimes we’re left wondering, what is that cool font?

That’s why we’re loving the What Font bookmarklet from developer Chengyin Liu. What Font is a little JavaScript bookmarklet you can add to your favorite browser and then, when you want to know which font a site is using, just click the bookmark and hover the text in question. What Font will hover a small transparent overlay with the typeface name (see screenshot above).

To try it out, head on over to Liu’s site and drag the bookmarklet to your browser’s bookmarks bar.

It’s worth noting that you can get the same information from Firebug or the WebKit Inspector, but What Font doesn’t have the interface overhead of Firebug or WebKit’s developer tools — it just does one thing and does it well. Couple the What Font bookmarklet with FontFonter and you can preview your website in your favorite new font in no time.

See Also: