Q&A

How to easily identify the fonts of a website?

14. Jul 2023 (updated)25 Comments

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 or Fontanello 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.

However, there are obviously privacy concerns, so maybe Fontanello is a better alternative. Also, if you want to know which fonts are used on your iPhone or iPad, Fontanello is a free tool you can install on iOS. It also works as browser extension for Chrome, Safari and Firefox, where I use it myself happily ever since.

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

  • Font Friday: I recommend one typeface per week, free fonts included.
  • Type Tuesdays: articles & videos that up your design game.
  • Join 2700+ typography enthusiasts, unsubscribe anytime.

25 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.

    Reply

  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.

    Reply

    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 😂.

      Reply

  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.

    Reply

    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.

      Reply

  5. 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.

    Reply

  6. Hi Oliver

    I have just found you after ploughing through the back catalogue for Website 101 podcasts. My compliments, as I reckon your episode on Typography to be one of the best in all their 4 series.

    I’ve only been involved with the development of a website for 4 months after volunteering to setup a site for a local charity that my wife is involved with. I’m using the Jekyll
    site generator on my Markdown pages, so no CMS & by default I don’t get a choice of Fonts without setting up a custom theme (perhaps my next task !).

    So I was curious to try your recommended tools to find out what fonts my site is using. I used the Firefox ‘Fonts Ninga’ extension which reported Apple system & Monospace fonts.
    But using the Firefox dev console, it reported my web pages to be using dejavu sans, dejavu mono, nimbus sans.

    So my question is why the discrepancy ?

    Thanks

    Reply

    1. Thanks for your super kind words, Chaz, happy you enjoyed the podcast episode. I had a lot of fun doing it 😉. Regarding your question – when I check out the site of the Prestbury Women’s Institute, I don’t see a difference in the dev tools on Firefox and Fonts Ninja. Both state apple-system and monospaced. There is no clue of Dejavue or Nimbus in the source code, either. So, not really sure what happened here 
 But I’m looking forward to seeing you pick a more distinct type choice! If you want to, let me know what you decided on!

      Reply

  8. Safari Extension Warning:

    ‱ Webpage Contents
    Can read sensitive information from webpages, including passwords, phone numbers, and credit cards. Can alter the appearance and behavior of webpages.

    This applies on all webpages.
    ‱ Browsing History
    Can see when you visit all webpages.

    Reply

  10. An alternative to “whatthefont” is “whatfontis.com”. Instead of finding only fonts from myfonts whatfontis has a wider database. This side helped me a lot finding exotic fonts.

    Reply

    1. Thanks for the addition, Andreas. It’s a nice database, the process is a bit cumbersome and cluttered, but the results are important, right?

      Reply

      1. Yes, it’s a little bit tricky, but the results are good. E.g. i found the elegant font Voyage from VJ-Type with whatfontis.

Leave a Reply

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