How can I know what fonts a website is using?

How can I find out what font or fonts a website is using? Are there any tools or browser extensions that can make the job easier?

Answer

Option 1: Use a browser extension (Easy)

Extensions such as WhatFont (available for Chrome, Firefox and Safari) make it quite easy to detect font families of any text in a webpage. You just need to install the extension, activate it on a site and click on the element you want to inspect. The results are shown in a floating box, always in the context of your choice.

---

Option 2: Manually check the CSS with browser inspectors (Advanced)

Most web browsers let you easily find the fonts by using right-click → 'Inspect' or 'Inspect Element'. It can also be done by pressing F12. This will show a list of styles attached to the website, that you can explore to find the fonts used in any HTML element.

Using the inspector is not as straightforward as using an extension, but it has several advantages. Some CSS understanding is required, as you'll usually need to go through several styles to find the one being applied. As a general rule, styles that are crossed out are being overwritten, so always look for the ones that are being applied last.

All styles from the page are listed in the Style tab, but if you use the Computed tab instead, you can find the properties that are actively applied to the element you have selected, including of course the font-family.

Finally, another way to quickly check what fonts are being used globally (but NOT how or where) is to go to 'Application → Frames → Fonts'. There, you will find a list of all referenced (non-system) fonts.

This second method is slower, but using the inspector can give you great insight into the way the whole page is built. Also, lots of designers and developers use it as a tool for testing changes before actually writing them on the stylesheet (because changing a CSS line in the inspector triggers a real-time preview in the browser).