4 Ways to Quickly Identify Your Favorite Web Page Fonts

Jessica Cam Wong 23-05-2011

We have gone over some elegant looking free fonts The 8 Best Free Font Websites for Free Fonts Online Not everyone can afford a licensed font. These websites will help you find the perfect free font for your next project. Read More here 10 Cool Free Computer Fonts That Will Make You Stand Out Read More 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 [No Longer Available] 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 How To Install Firebug on IE, Safari, Chrome & Opera Read More , but with the rave reviews Firebug received, this great tool is now available for other browsers as a bookmarklet called Firebug Lite and also aChrome 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.

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 How to Identify Fonts Used in Any Photo or Image What do you do when you come across a wonderful new font and don't know what it is? Fortunately, Photoshop CC 2017 has just the "forensic tool" to help you do just that. Read More , 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 Easily Identify Fonts From a Sample Read More , is similar to WhatTheFont in that you it helps you identify fonts from an image Easily Identify That Cool Text Font with WhatFontIs Read More . 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 10 Cool & Interesting Web Applications On Fonts & Typography I have always been intrigued by how thick and thin lines, angles and shapes can come together and form beautiful fonts. Just a shift of pressure on a stroke and you can get something entirely... Read More altogether, or also train your eyes to identify properties of fonts with FontTrainer FontTrainer: Learn To Recognize Common Font Types Read More 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 2 Free Tools To Make Your Own Text Font Read More .


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

Image credit: JoanaCroft at Stock.Xchng

Whatsapp Pinterest

Enjoyed this article? Stay informed by joining our newsletter!

Enter your Email

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Peter
    May 25, 2011 at 1:45 am

    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.
      May 25, 2011 at 2:19 am

      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. :)

    • Anonymous
      July 2, 2011 at 11:20 pm

      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.

  2. Ankur
    May 24, 2011 at 5:14 am

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