07 April 2011

[web_design] Quickly ID Web Page Fonts with WhatFont Bookmarklet

2596.There are quite a few ways of figuring out what font a web page is doing but Chengyin Liu may have just come up with the quickest, most intuitive.

Utilities like Firebug are nifty but they assault you with information … way too much unless you're a real web-design pro. Or maybe you are but you want a real quick read. Here's how you go about it.

1. Navigate to this page: http://chengyinliu.com/whatfont.html

2. Mouseover the gray button that reads WhatFont, click and drag to your bookmarks bar, and drop it. It will lodge there under with the label "WhatFont".

Dragging WhatFont

Additionally, you can click on the button to try it out without installing it.

3. To use the bookmarklet, click on it and mouse over the text. You'll see something just like this:

WhatFont In Action

The font (as defined in the page's font specification) appears in a gray box just like above.

4. To turn it off, click on the "Exit WhatFont" block that has appeared in the upper-right-hand corner of the browser window:

Exit WhatFont

… and it will go away.

It's just a clever, quick, and simple way to do it.


No comments: