WhatFont: Find Out What Any Type Of Font Is On A Webpage [Cross-Platform]

find what a font isHave you ever been on a website and wondered “What type of font is that?!” I have. And depending on your interests and area of focus, you may even do it more than the typical Internet user. You could spend hours searching for the font on your favorite search engine, or you could use WhatFont.

WhatFont is a browser extension and bookmarklet that you can enable once you’re on the website with the font in question.

About WhatFont & Who’s Behind It

Like I stated previously, WhatFont is a simple tool that you can use to find out what a type of font is. There are other tools for this as well, commonly used by developers, but they aren’t a quick and easy solution, especially for someone who might be curious, but doesn’t deal with fonts all the time. The great thing about WhatFont is it’s for both types of users.

WhatFont was created by Chengyin Liu, currently an undergraduate Computer Science student. He has several projects going on, which he links to on his personal website. One of those many projects is WhatFont.

find what a font is

The WhatFont page has literally all of the information you’ll need including instructions on how to use it. A couple of examples of the information provided are a test field, changelog, and the contact information of Chengyin, the developer.

find out what a font is

Browser Compatibility With WhatFont

Depending on your preferred browser, you can use WhatFont via extension or bookmarklet. The extension is only available for Chrome and Safari, whereas the bookmarklet works for Firefox, Chrome, Safari, IE and Opera.

find out what a font is

Now, if you look at the image above, you’ll see he doesn’t include Opera in the list of browsers that the bookmarklet works in. Honestly, I thought that was odd because I’ve found very few bookmarklets that haven’t worked in a browser, so I tried it out in Opera and as you can see in the image below, it worked fine.

find out what a font is

How To Use WhatFont

Using WhatFont is really simple and hardly even needs a section to explain it. After you have acquired it, refresh any already loaded webpages that you want to use it on and click the bookmarklet or extension.

If you hover over the desired font, only the type of font will be displayed. If you click on the font itself, you will get a pop-up with more information such as the font family, size, line height, color and sometimes the origin of the font.

For example, in the image below you can see that the fonts are from TypeKit. You can also tweet out the font if you so desire.

find out a font

You may also notice that you can click on multiple fonts without losing the previous popup. Simple feature, but smart as you may often want to compare different fonts.

find out a font

Also note that while using WhatFont, you won’t be able to completely interact with the webpage, except for WhatFont purposes. You can quickly exit out of WhatFont by clicking the button in the top right corner.

find out a font

Where To Find WhatFont

By now you’ve probably figured out where to get WhatFont. The most direct way to acquire it is through the website, especially for the bookmarklet. I would also recommend this method for downloading the Safari extension. For Chrome, you can head right to the Chrome Web Store and get it that way.

find what a font is

Conclusion

Again, you may not always use this tool, but it’s convenient to have for those times when you would like to identify a font. And it is especially nice for website developers and designers.

What do you think of WhatFont? Have you tried it? We’d love to hear your feedback.


MakeUseOf Recommends

Aaron Couch

Aaron is a Vet Assistant graduate, with his primary interests in exotic animals and technology. He enjoys mountain biking, photography and any active sport. When he's not writing or indulging in technological findings throughout the interwebs, he can be found interning at his local zoo. Read more about Aaron on his personal website and follow him on Twitter.

The comments were closed because the article is more than 180 days old.

If you have any questions related to stuff mentioned in the article or need help with any computer issue, just ask it on MakeUseOf Answers.

Hide 11 Comments

  • Félix S. De Jesús November 1, 2012
    0 likes

    Very useful in my case… I want to get things like that for images.

    | Like
  • Michael Jan Moratalla November 1, 2012
    0 likes

    wow very useful thx

    | Like
  • Harshal Warkhede November 1, 2012
    0 likes

    Good idea! its really useful. Thanks.

    | Like
  • Mac Witty November 1, 2012
    0 likes

    Great tool, have been in my toolbar for some times
    Would love to have something like that for other readers too
    I have tried to read pdf in chrome but it don’t work wit hthem

    | Like
  • Siddhant Chaurasia November 2, 2012
    0 likes

    THANK YOU SO MUCH FOR THIS! You dont know how much i have been looking for this

    | Like
  • Raymond Beets November 2, 2012
    0 likes

    This is excellent in idea and execution. Very useful indeed.

    | Like
  • Anthony Monori November 3, 2012
    0 likes

    I, as someone who makes websites from time to time, appreciate your post. I stumble upon a lot of great design but sometimes it’s hard to figure out what font are they using in their graphics. Thanks.

    | Like
  • Boni Oloff November 4, 2012
    0 likes

    This is a great tools for web developer that wants to know great font used in other websites..

    | Like
  • Terafall November 6, 2012
    0 likes

    I wish I found this sooner

    | Like
  • Tiffany April 2, 2013
    0 likes

    Do you know if this is still supported? I just installed it into Safari and it doesn’t seem to be working…even on the TEST section of the developer page. Thanks!

    | Like
    • Aaron Couch April 2, 2013
      0 likes

      Tiffany,

      Unfortunately, I know nothing about Safari — I don’t even think Apple allows you to download it to Windows anymore.

      I recommend you get in touch with the developer:
      Twitter: http://twitter.com/chengyinliu
      Email: chengyin.liu@gmail.com

      Hope this helps and keep us posted about the feedback you get from him!

      | Like