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?
-
1See my answer at Stack Overflow for built-in tools in Chrome and Firefox, and a copy-paste option for Safari: stackoverflow.com/questions/884177/…– ArjanCommented Jan 8, 2018 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?– WesternGunCommented Mar 14, 2018 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.– ArjanCommented Apr 30, 2018 at 20:56
-
OK I overlooked the screenshot @Arjan. Now it is obvious.– WesternGunCommented May 2, 2018 at 1:06
-
I feel like the answers provided here are more specific to see a font for any particular element. But the OP asked if he can see fonts used by a website. This is not that specific, but is more general and I would think that there are some tools out there that should be able to handle this. For instance, to inspect/crawl an entire website and output the list of fonts available for use and/or ones that are being used. This would be more useful in knowing whether you have to load the font via @font-face or if it's already available for use on that website for developers.– Solomon ClossonCommented Jun 26, 2020 at 0:59
Add a comment
|
4 Answers
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).
-
1Nice 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!) Commented Jan 12, 2016 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.– YiselaCommented Jan 12, 2016 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. Commented Jan 12, 2016 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.– YiselaCommented Jan 12, 2016 at 15:11
-
4Also 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. Commented Jan 12, 2016 at 15:21
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+.
-
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. Commented Dec 1, 2016 at 13:45
-
1
-
@FaithReaper the site (and script) still works perfectly well for me– CaiCommented Mar 14, 2018 at 10:49
-
1I 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/ Commented Mar 14, 2018 at 10:57
-
@FaithReaper the site should look like this: i.sstatic.net/goShP.png (You don't upload images though, it's just a bookmark that you use to inspect fonts used on live sites)– CaiCommented Mar 14, 2018 at 11:13
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.
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.
-
3Hi Khushbu, welcome to GDSE. Could you tell us what and where we can "FontFinder"? Also, if you are affiliated with the product you must disclose your affiliation in your answers. See How to not be a spammer.– CaiCommented Nov 22, 2017 at 11:33
-
2The text in the answer above is a copy-and-paste from chrome.google.com/webstore/detail/font-finder/… and/or add0n.com/font-finder.html– ChrisWCommented Jan 2, 2018 at 12:58