“WhatFont” And Why its Awesome
Quick Summary Most of you probably know about the tool “WhatFont” and are probably using it regularly. However, I do speak with a lot of web designers who have never heard of this really awesome bookmarklet / extension. If you are one of these deprived souls, please read on.
Most of you probably know about the tool “WhatFont” and are probably using it regularly. However, I do speak with a lot of web designers who have never heard of this really awesome extension. If you are one of these deprived souls, please read on. I’m sure you’ll get tons of use out of it.
WebFonts
Now-a-days web fonts are being used everywhere. @font-face really blew up in 2011. And for good reason. This little CSS rule totally revolutionized typography on the web. Back in the “day” we had to rely on system fonts or images for different type treatments!! *(yeah…it was terrible) *With resources like Google Web Fonts and Font Squirrel – we can easily implement an endless amount of fonts into our websites and web-apps. (This really isn’t a new CSS3 feature, @font-face was implemented in CSS2 and has been compatible with IE5.)
WhatFont
There are a ton of great web designers and developers who are doing amazing things with Web Fonts. So, wouldn’t it be nice if you could see which fonts they’re using? Sure, you can view source and find the .css or use Firebug. But who wants to go through all that?! It should be MUCH easier. Well, WhatFont has got ya covered. WhatFont makes it so easy to inspect any font on a website, with just one click.
The extension is available for both Chrome and Safari, as well as a bookmarklet. Once installed, all you need to do is click the extension’s icon in your browser’s toolbar, and then click the font you wish to view. Simple. I’ve include an excerpt from the developer’s website below. He basically explains it all.
*Taken from the developer’s website: http://chengyinliu.com/whatfont.html**“What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that’s too complicated. It should be just a click away.**Hence I wrote WhatFont, with which you can easily get font information about the text you are hovering on.*To embrace the new web font era, WhatFont also detects services used for serving the font. Now supports Typekit and Google Font API.”
You can download the extension from the developer’s website or from the chrome store.
Cheers
-John
