: 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?

@Jamie315

FontFinder is created for designers, developers and typographers. It allows a user to analyze the font information of any element on a page, copy any piece(s) of that information to the clipboard, and perform inline replacements to test new layouts.

This add on is the best for finding the font and other css such as font weight, size and many more form webpage.

Vote Up Vote Down

@Shakeerah625

I love the Chrome browser extension CSSViewer. You just click it and hover over the font you want to identify and it shows you the font-family.

Vote Up Vote Down

@Berryessa866

Browser's 'inspect element' isn't perfect

Using the developer tools of your browser is a good way to see which fonts are declared in the CSS of a website. This doesn't show which font is actually being rendered though—it only shows the font-stack being applied—the actual font being rendered can vary depending on installed fonts etc.

Another useful tool is Fount.


Fount will tell you which web font in your font-stack you are actually seeing – not just what is supposed to be seen. It’ll also tell you the font size, weight, and style.


Using Fount is as easy as adding a bookmark. No need to install an app or any extensions.

After adding the bookmark:


Go to any site and click the Fount bookmarklet.
Click on any type you want to identify. Repeat.
To turn Fount off, just click the bookmarklet again.


Fount works in Safari, Chrome, Firefox, and IE8+.

Vote Up Vote Down

@Murray976

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

Vote Up Vote Down