Q&A

How to easily identify the fonts of a website?

Sarah, a lovely subscriber of the Pimp my Type Newsletter, sent me a question about how to identify fonts:

I have just read this article and really like the font here, just because I found it pleasing on the eye and easy to read. Is there a way of easily finding out what the font is called? Like putting it through a font finder or font forensic machine?!

The article Sarah discovered on the Mozilla Blog, where she wanted to know the typeface.

There is, Sarah! The font used on this site is Inter, a sans-serif that falls into the category of San Francisco or Roboto, and gained huge popularity in the recent years (with rank 24 in popularity of 1284 fonts in total). But how did I find that out?

I use three ways to identify a font on a website, pick the one that works better for you or the given situation.

1. Fonts Ninja browser extension

I use the Fonts Ninja browser extension which is available for Firefox, Safari, and Chrome. It makes it easy to identify a typeface just by hovering over it.

Fonts Ninja lets you easily identify the typefaces of a website just by hovering over them.

You can bookmark it, and get additional info. Like the designer, if it’s free or how much a license is. You can also test it with your own text and even install it, if you use the Fonts Ninja app. But even when not using the app or paid service (which I don’t), it will still provide you with useful data. So this is super cool.

Additional information about the font, designer, available styles, and price. Bookmark or even test it with your own text here.

2. Your browser’s dev tools

Any browser comes with dev tools to inspect a website. Open them up by right-clicking “inspect“ on the site. I’m a big fan and user of Firefox and their developer tools also have a dedicated section for typography. Safari has something similar, Chrome does not (but it also provides the information, just a little less focused).

Firefox dev tools opened up showing the fonts Inter Regular, Inter Italic, Inter Bold and Inter Bold Italic used on the site.
In Firefox’s dev tools on the bottom right, you can find a dedicated Fonts tab. See the different fonts used on the site listed, hover on a certain style to see it highlighted on the page.

3. Use image recognition software

The first two methods only work with actual text on a website. If the text is inside a graphic, illustration or logo, you have to use image recognition tools. Since my times at design school back in 2005, I’m a fan of What the Font by MyFonts. Upload the image in good quality, select the text and then browser the results.

Results for the visual search of the monospace typeface used in a header graphic of an article with the word “click me“.
If you only have an image, use tools like What the Font. Be aware that you have to look closely, that it’s not always accurate, and depends on the quality of the image.

You will have to look very closely and train your eye to spot every single detail, and in some cases it does not find a suited result, because it only can browser the typefaces inside MyFont’s catalogue. For the header image of the bespoke article with the words “Click me” in it, I could not find out which typeface it was. But for many common fonts it worked fine for me in the recent years.

I hope this was helpful to you! If you want to dive into more about this, Ralf shares 5 great tips to identity a typeface in a short video also covering pdf and IdentiFont.


If you have a question as well, happy to read in the comments below or just shoot me an email!

Typographic power to your inbox!

  • FontFriday: I personally recommend one typeface per week and for what application it’s best. Every second week, it’s a free font.
  • Pimp my Type: Every second Tuesday a short article or a video from the YouTube channel that help you improve the design of your website, app or digital product.
  • No Comic Sans, Open Sans 😉 or any other BS, like annoying ads. Your email will only be used to send out the newsletters, unsubscribe anytime.

10 Comments

  1. I’ve been using the first two options from your list, Oliver. What a saver peers, hey, for curious designers! And I even trained my font recognition skills over time. So this will empower Sarah! Sharing-caring💫
    The 3rd one is what I needed. Thank youuu!🙏🏻
    I think your Bressay would look totally different in a black version. So, better to keep it this way, it speaks your personal brand’s voice more accurately. I’d suggest slightly shade the blue with 5-10% of black to it.

  2. Hey Oliver!
    I’m using Fonts Ninja browser extension for a couple of years now and I find it quite helpful. But there is one issue with it that I don’t stand. When you enable the extension by clicking on it, the code is wrapped in the extension’s code marks. So if you want to play in the inspector after checking with the Font Ninja, you should refresh the page to clear the code.
    I haven’t check it recently. Maybe they improved on this. But I already do this refresh automatically.

    1. I totally agree, Hrvoje! The issue still remains. Like you, I always have to remind myself to refresh before inspecting the code after using Fonts Ninja. But I guess that we are an edge use case 😂.

  3. Another handy – and simple – plugin is Type Sample. It used to have its own website where you could store and view type samples; now it is available from Typewolf: https://www.typewolf.com/type-sample

    After adding it to the tool bar, you simply click “Type Sample” or however you named the plugin, hover over the website and it will reveal typeface names upon hover, sometimes after clicking on a piece of text.

    Sometimes it is buggy, but usually it does just what you want it to do.

    1. Very cool suggestion, Matthijs! Didn’t know that, and love that you can easily save a .png with it. It took some time for me to get what I should do to install it, but now I got it, I had to show the bookmark bar in my browser view setting.

    1. Thanks for sharing the mobile app, Richard. This is really helpful, since not everyone is on a desktop computer!

  4. It’s not available for Safari, which is a minor annoyance as a Mac user, however I wanted to mention an alternative browser extension for Chrome and Firefox called Fontanello for finding fonts used on a website. Just right-click on a selected piece of text and see all the information from Fontanello.

Leave a Reply

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