Fonts and typography make up a fundamental aspect of website design. If you're interested in figuring out what font a website is using, there are several methods to do just that. Perhaps you've stumbled across one that you would like to use in your own projects - this guide will show you exactly how to identify that font!

Use Chrome Browser Inspect Tool

Because the chrome browser is the most popular browser used in 2024, let's start here. Hover your cursor over the font that you want to identify and right click. Select inspect. This will toggle a panel that will show you all of the code, CSS, and additional features that go into creating this website.

Beneath all the HTML code is the styles tab. This shows which CSS applies to the selected HTML. Because we write clicked on the text that we want to identify, the underlying HTML is already selected.

With CSS, the font-family property is used to apply a specific font to text. Therefore, we can use this to understand which font is being applied to which specific element on the page.

Use the filter input and type in "font-family". This will show you all of the font family CSS rules. Here you can see that there are two, one being crossed out. The one that isn't crossed out is the font that is applied to the specific text we like. The one that is crossed out is typically a more global find family that has been over written by a more specific one.

In this situation, the font family is "Eina02, Semi Bold". The additional fonts such as Helvetica Neue are fallbacks, which will show if Eina doesn't load.

Simply search whatever specified under font family in Google, and he will be directed to the most relevant result for that specific family.

Use Firefox Browser Inspect Tool

With Firefox, it's a very similar process to find the font that a website is using. Right click, and choose inspect.

Use the filter feature to find font-family. In this instance, the code looks like this:

h1, h2 {
    font-family: "RooneySans-Medium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif;
    font-weight: normal;
}Code language: CSS (css)

Now, search Google for the name; in this instance it's "RooneySans-Medium".

Use Hoverify

We use a tool designed to make website developers lives easier called Hoverify. This is a paid browser extension with several dozen features, and one of them is automatic font identification.

Hoverify is essentially developer tools and browser inspector on steroids. The font identification feature goes a step further than the methods outlined above in that it will show you all of the fonts associated with specific HTML elements, like so:

Use FontSpring Matcherator

If you're looking to identify fonts in an image or a screenshot of a website, there's a way to do that as well. It's a lot less accurate than the methods outlined above, but if you have a static image this is your best option.

FontSpring Matcherator is a free online tool that allows you to upload images and then uses recognition technology to match the font to a massive database of both free and paid options.

Conclusion

There are several ways to identify what font a website is using. The easiest is probably just going with your built-in developer tools. By using the filter feature, you don't even need to understand code to get to the font-family CSS rule and identify the specific name of that font. If you have any other tips and tricks, feel free to leave them in the comment section below.