Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
    
Please mark the below answer as the accepted answer. – Darth_Vader Mar 10 at 19:24

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

share|improve this answer
    
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!) – user568458 Jan 12 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 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 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 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 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:

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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