Quickly Find What Font A Webpage Uses

Ever wondered what font, size and color the text in a particular webpage is using? This type of information is particularly of use to web developers and designers but an increasing number of non-professionals publish their own blog or small business website – and finding out the font details of a really good looking website can help you design your own.

Methods To Find What Fonts Are Used

1. Manual – you can inspect the HTML and Style Sheets of a website to find out what fonts are used but that is long winded and quite hard to do.
2. Firebug – web browser add-ons like Firebug are popular with professional developers and, if used daily, are easier to get to grips with – but they are still complex and overkill for occasional use by the average non-professional.
3. WhatFont – this Google Chrome extension (a Firefox/IE bookmarklet and Opera extension are available too) provides a simple and quick way to find out the individual fonts, colors and sizes of any text in a webpage.

WhatFont – this extension lets you easily inspect web fonts by just hovering your mouse cursor over text: Hover – provides the basic font name e.g. Arial as shown in the example below:

whatfont1You can also click on the text to provide more details:

Click – provides the font name, font family, font size, line height and color (hex code or RGB) as shown in the example below:

whatfont2

WhatFont detects the services used for serving the web fonts – it supports Typekit and Google Font API.

How To Use WhatFont

For Chrome:

  • Install the extension from the Chrome Web Store here.
  • Browse to the webpage you want to inspect and click the ‘f?’ WhatFont icon in the top right of Chrome to turn it on.
  • Hover over text to display a small popup with the font name or click on text to display a larger popup with more details (click the x to close the popup).
  • Click the ‘f?’ WhatFont icon to turn it off.

Obviously, whilst WhatFont is switched On you can’t navigate to different pages of the website because clicking on a link will just reveal more details about the font used – to go to a different webpage or follow a link, switch WhatFont off first.

For Firefox, IE or Safari:

Visit the author’s website here and, under the How To Use It section, select the Bookmarklet for Firefox/IE (and drag it to your Bookmark bar) or select/install the Safari Extension.

Conclusion

WhatFont is an excellent tool to quickly find out what font a webpage uses – and other info such as the color and size of the font. There are more complex methods to inspect webpages but, for occasional and quick use, the extension is much easier.