Quantcast How to Detect Fonts on a Webpage ? ← BLOG404

How to Detect Fonts on a Webpage ? 7

While surfing the net you come across lots of blogs with rather interesting and too beautiful fonts . With the exception of  Times New Roman , Verdana and few others you might have tested in Microsoft Word , there’s very lil clue to digg more about that delicious font you might be interested in to use in your blog or preferably download it for Microsoft Office so that your project look more awesome !

There have been many Javascript tricks , CSS font detectors which help us to find the font but these are not efficient all the time . If more than one font has been used, it will be even harder to check which font has been used where. And tools like Firebug sure takes lots of time and patience if the source is bulky but thanks to advance developments in HTML5 and CSS , Any font can now be detected on any webpage because of WhatFont .

WhatFont is Bookmarklet and also available as an extension for Chrome that tells you which fonts have been used on the site and it’s attributes. The WhatFont button appears when it’s installed .

  • Click on the button and mouse over any font to  find out which one it is.
  • Right-click on the web page and the extension adds a small box that tells you all the font properties .
  • Get to know the family the font is from, what font size has been used, the weight (whether the text is normal, bold or italic) and the line height.
  • Easily identify and get complete details of all fonts used anywhere on a single page of a website.

However the extension does not identify fonts used in images .

The best way to steal detect fonts and use it for your own use 😀 . One of the most cool extensions and a must for web designers and developers !

Install WhatFont For Chrome | Bookmarklet Link

7 thoughts on “How to Detect Fonts on a Webpage ?

  1. Reply Rajesh@Bypass Sharecash May 13,2011 5:24 pm

    Great find Ajinkya!!!
    I used to take much pains in finding fonts for particular websites. This tool is simply amazing and time saving. Thanks and the bookmarklet works great with Firefox. Got to know many new fonts.

    • Reply Ajinkya May 14,2011 9:35 am

      Its good that bookmarklet is available for all browsers . After extension for chrome , i hope it all brings addons and plugins to firefox , opera and safari 😀

  2. Reply Tony May 13,2011 11:47 pm

    This is a good way to check what’s the font of selected test. But you also can using Firebug, a plugin for Firefox to check it.

    • Reply Ajinkya May 14,2011 9:33 am

      Firebug is a good alternative if you are not using chrome because this WhatFont is available as an extension only in chrome . But if you use chrome than it’s damn easy to use this handy extension 🙂

  3. Reply TechGopal May 23,2011 4:50 pm

    really nice plug in ……..
    but i prefer firebug…

  4. Reply Andrew Clarke@FHA Loan Austin Sep 23,2011 1:48 pm

    I use Firebug myself and I haven’t really tried using anything else. This extension seems to be more user-friendly to me. I’ll check this out later. Thanks for the review. As always, you’ve been very helpful!

  5. Reply Isidra Nov 27,2013 4:05 pm

    Touche. Sound arguments. Keep up the good work.

Leave a Reply