4 Ways To Quickly Identify Your Favorite Web Page Fonts

Ads by Google

web page fontsWe have gone over some elegant looking free fonts here ready to be used in any of your projects, but many new fonts are born every so often thanks to talented artists. You can spot them in new web app logos, magazines, food packages, etc.

How do you find out what font these texts are so you can use them? Here are a few services that can help you identify the particular web page font you’re looking at and make the process more automated than anything and less painful.

For Web Designers/Developers: Firebug

web page fonts

Firebug started as a Firefox addon that bundles many web development tools and lets you debug and edit CSS, HTML, and JavaScript in any webpage. Back in March of 2009, it was still a Firefox-exclusive tool. We had published an article on how to install Firebug on IE, Safari, Chrome and Opera, but with the rave reviews Firebug received, this great tool is now available for other browsers as a bookmarklet called Firebug Lite and also a Chrome extension.

While not a complete substitute for the Firefox addon, this Lite bookmarklet has replicated many of the functionalities available on the addon. Even the physical appearance bears resemblances that you almost can’t tell you’re not using Firefox. But since Firebug Lite isn’t exactly the same thing, the author’s website does recommend to use the bookmarklet in conjunction with Chrome Developer Tools if you’re using Google Chrome.

Ads by Google

Anyhow, once you have the bookmarklet or the Chrome extension and you see text with an unknown font you love, you can highlight the words, press on the bookmarklet link, head to the HTML tab on the main left pane, and then the Computed tab on the right column to see the font name, family, size, weight, etc.

While Firebug is nice and dandy for web developers, if you’re not a web designer, there’s a simpler way to quickly find the font family of some text.

Quick & Neat Way For Any Typography Enthusiast: WhatFont

WhatFont consists of a neat bookmarklet that, once activated, you can hover over any text and immediately get a very nice-looking overlay which pops up with the name of the font. Once you click it, you’ll see additional details about the font. To go back to regular surfing mode without the overlays, just click on the top right corner that says Exit WhatFont.

Just like Firebug Lite, WhatFont understandably cannot make out the font from images, but at least it notifies you when it might be inaccurate.

web fonts

If you’re not a web developer or designer, but just a casual typography enthusiast, WhatFont is a perfect, neat and quick way to get font details.

Identifying Fonts In Images: WhatTheFont & WhatFontIs

web fonts

You can always ask in typography expert forums for help identifying a web page font, but you should only try that if you’ve used WhatTheFont as it’s really easy to use. Just get a PNG screenshot of some text in the font you adore with the least white space possible and upload the image or paste the image URL. Now just type or correct the letters that WhatTheFont highlights in the next screen, leaving any incomplete characters’ text boxes blank, and that’s it.

You may not always get the same exact font, but usually there are many closely related fonts that WhatTheFont will present for you. In my tests, the one font that WhatTheFont couldn’t exactly find, an expert in the very helpful forum identified it in less than 24 hours.

WhatFontIs, formerly known as IdentifyFonts, is similar to WhatTheFont in that you it helps you identify fonts from an image. On this site, you also upload an image, identify highlighted characters, and get a list of fonts resembling the ones in your image. One difference is that during the character selection step, you can choose to see all results, only commercial fonts or just free ones. You also get the license detail in the results list to save you time.

web page fonts

Web Designer Depot has a list of font-identifying tools, but the ones on here require the least manual work. You can always learn typography altogether, or also train your eyes to identify properties of fonts with FontTrainer to not have to rely on these tools.

Instead of identifying web page fonts made by other people, you can also make your very own fonts with these free tools.

Did we miss any super easy ways to identify fonts? Let us know in the comments!

Image credit: JoanaCroft at Stock.Xchng

Ads by Google
Check out more about:
From the Web

4 Comments - Write a Comment



thats a very useful post. I look into fonts of various sites to inspire for my site. This would be quite handy tool.



People who care so much about fonts are really annoying.  They are always super-passionate about it and fail to realize that the other 99.9999% of the population couldn’t care less about fonts.

Jessica Cam W.

Not all consumers may care but I’m pretty sure there are lots of businesses that want their brands/logos to look unique, thus, this info may still be helpful. :)


People who care so much about technology are really annoying. They are always super-passionate about it and fail to realise that the other 99.9999% of the population couldn’t care less about technology.

Everyone has something they are passionate about that. For some, that happens to be fonts. Very interesting actually.

Your comment