There are a couple of ways to find out which fonts a website is using. I’ll show you the fastest way first.
The fastest way to find a website’s fonts is to install a browser extension. There are a few different ones, but I recommend WhatFont.
Go here to download WhatFont, it takes a few seconds and zero setup:
Once WhatFont is installed, you’ll see the WhatFont icon at the top, in your browser toolbar.
Now to see any websites fonts, click on the WhatFont icon, and then hover it over any text element to expose its font family/typeface name.
Click on the text element to see more details of the font, such as font style, font weight, size, leading (line-height) and color.
Find Font family without extensions
If you don’t want to install another tool in your browser, you can right-click on any text element and click Inspect to expose the website’s CSS stylesheet inside Chrome’s DevTools interface.
On your selected element there will be a corresponding CSS rule-set that sometimes shows the font family used by that element.
If the font family doesn’t show, you’ll sometimes be able to find it if you click on surrounding elements, e.g. parent elements that wrap the text element you inspected.
Otherwise, go all the way to the CSS body rule-set, and it will almost always be defined there. However, a website could be using two fonts, and only one font family can be defined on the body element.
So yeah, finding a specific text elements font can take a little bit of time if the website uses more than one font family (most modern sites use 2-3) especially if you’re new to using DevTools. If you want to save time and don’t mind installing a browser extension, go ahead and use WhatFont! :)
