36

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?

  • 1
    See my answer at Stack Overflow for built-in tools in Chrome and Firefox, and a copy-paste option for Safari: stackoverflow.com/questions/884177/… – Arjan Jan 8 '18 at 21:11
  • Without 10 rep to answer so I do it here: as by this moment(2018.3), Fount is not available, and WhatFont is not accessible in Firefox add-on store; at last I have to enter Chrome/IE/FF/Opera's DevTool, "Style" tab, edit the property to delete each font and see what is the applied font. It is a big pity that all DevTools only shows the full stack of fonts and not the actually applied one. Even in FF, the "best matched" is not the best matched; the "best matched" pop-up shows on every font in the stack........ silly right? – WesternGun Mar 14 '18 at 10:54
  • @WesternGun, what do you mean by "all DevTools"? Firefox and Chrome show the actual font just fine; see the screenshots in the answer I linked in my earlier comment. – Arjan Apr 30 '18 at 20:56
  • OK I overlooked the screenshot @Arjan. Now it is obvious. – WesternGun May 2 '18 at 1:06
44

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.

enter image description here


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.

enter image description here

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

  • 1
    Nice move :-) one thought - how to tell which font in the font family stack is the one you're actually seeing on the screen? I usually do it by trial-and-error, deleting from the first font until it causes the appearance to change, but I'm sure there's a better way. In WhatFont is it the one in italics? (p.s. welcome back!) – user56reinstatemonica8 Jan 12 '16 at 13:50
  • @user568458 Thanks :) I definitely want to add screenshots of the process of finding the font with the inspector. I have a hard time myself even after years of using it! But to be honest, I don't actually have a proper technique, I do trial and error as well. In WhatFont I believe it being in italics means it's not a system font. – Yisela Jan 12 '16 at 13:53
  • @Yisela out of curiosity why does the WhatFont screenshot show a red color grab (#ea4858) of a blue font? Is it just the color you grabbed previously or an error? EDIT: Oh I see it's probably the hover color when you were selecting that element, which seems un-ideal but still cool. – DasBeasto Jan 12 '16 at 14:11
  • @DasBeasto Yep, it's the hover color! i.imgur.com/5NLjaEV.png Good point though, another victory for manual inspection, as it lets you pick different interaction states. – Yisela Jan 12 '16 at 15:11
  • 3
    Also just wanted to add, Firefox (v35.0) has a good element inspector for fonts. You can select the font tab that will tell you all the details about the element you selected (font family, style, filetype), or can hit "show all the fonts used in the page" which will show all that downloaded from the server. Then you can visit the computed tab which will also tell you things like color size etc. without the extra clutter and inheritance like Chrome. – DasBeasto Jan 12 '16 at 15:21
11

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:

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

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

  • Fount is good given that it works for IE too, but the WhatFont fares better because it shows you the actual visible font as well as the font specified in the HTML markup. So comparison is quick. – Moiz Tankiwala Dec 1 '16 at 13:45
  • 1
    Site down...not available in 2018 – WesternGun Mar 14 '18 at 10:45
  • @FaithReaper the site (and script) still works perfectly well for me – Cai Mar 14 '18 at 10:49
  • 1
    I enter the site and just see a grey block on the left, without instruction or nothing? I am not able to upload the images but it looks weird. fount.artequalswork.com/ – WesternGun Mar 14 '18 at 10:57
  • @FaithReaper the site should look like this: i.stack.imgur.com/goShP.png (You don't upload images though, it's just a bookmark that you use to inspect fonts used on live sites) – Cai Mar 14 '18 at 11:13
1

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.

css viewer chrome extension

-2

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.