How To Identify Fonts on the Web

Hey, Pixels! Have you ever been on a website and noticed that it was using a gorgeous font, but didn’t know what font it was? That’s definitely happened to me, many times. There are so many amazing web fonts ready to be used by us designers. This week, I’m going to show you how to identify any font on the web. So without any further delay, let’s jump right in!

1. Adobe Fonts

Adobe Fonts is such an amazing resource. Not only can you use fonts on related apps like Illustrator and XD, but you can also use Adobe fonts on your own websites. Another great tool that I’ve found very useful is their visual font search. This is very useful if you have an image that has a font you want to use. Simply drag and drop an image or screenshot of the font you want to find, and Adobe Fonts will instantly scan the photo and match the font.

2. Web Inspector

As a web developer, I’m well aware that you can’t take what you see on a website at face value. One of my favorite ways to explore a website that I like is via the web inspector. That way, I can really see the code and other website assets. You can also use the web inspector to see what font is being used on any web page. Simply highlight the text, click Inspect in Chrome and in the Styles tab, you can see the exact font that is being used. Alternatively, in Firefox, right-click and select Inspect Element and in the right-hand panel, simply select the fonts tab to see the current font being used as well as all fonts on the page.

3. WhatFont

There is a really great Chrome extension called WhatFont. Simply activate the chrome extension, and on any website, you can hover over areas and instantly see the font family, weight, style, etc. There are also many other chrome extensions that you can use to find fonts on any website.

Let’s Chat!

How do you identify fonts on the web? What tools do you use? Leave a comment below!

Like this article?

1 comment

  1. Loved the article and great Insight!
    I always opt for browser extensions myself. My recent favourite has been Find website used fonts
    Its pretty simple and easy to use as it automatically lists all the fonts used on a web page. Just click the extension icon and it’ll quickly let you know what fonts are used on the website you’re on. Super user-friendly!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.