software rec - Utility to determine the font used on a site?

For example: I like the fonts used on the website : NYTimes, so something that could list all the fonts used by the website would be great!

I do NOT want a image processing utility that could analyze the screenshots or a site that will ask questions about the font and narrow down from its list.

Something that could just crawl the website and list its fonts... It would be great if it could overlay the fonts on the regions, but that would be going too far, I guess.

Answer

There are multiple ways to accomplish this. I actually do this quite a lot, because I'm very interested in how CSS works, and also I just love typography. The two ways I like to do this are:

• Using an "inspector" with your browser (this is what you're looking for!) - I use Google Chrome (because I love it), which has a built-in Inspector tool. You really should try it. You just go to a site, right-click on whatever element you want to analyze, and click "Inspect Element" from the context menu. The Inspector displays the dynamic properties of the HTML and CSS, so if you were to inspect a text element, you would see the font-family css property in the inspector (in the right side-bar), which will tell you what the font is (see below for information on how to interpret this CSS). You can use Firebug for Firefox to accomplish something similar, but I believe that the Google Chrome Inspector tool is far superior (I'm a web developer - I use it for everything!).


• 
  

  Or, you can manually view the source of the page and analyze the CSS. Here's how to do it:

  
  
  
  
  1. 
     

     When you're on the page, view the source. If you're in Internet Explorer, go to Page --> View Source or View --> Source. If you're using Firefox, Chrome, or any other modern browser, hit Ctrl+U (or Apple+U, depending on your operating system).

     
     
  
  
  2. 
     

     In the HTML code, search for the text contents that you're trying to analyze. You should find some tags that contain the text, and they may either have the fonts hard-coded into the HTML (using a tag or in the style attribute of a

     or a

     enclosure), or it may reference some CSS (look for a class or id attribute, and write these down).

     
     
  
  
  3. 
     

     If it's the latter (it references some CSS), go to the top of the HTML and find the tags in the of the page. If the link is referencing a stylesheet, you will see it - all you have to do now is go to that CSS style sheet and search for the class or id identifiers you wrote down. Somewhere, you will find a corresponding font-family proerpty (don't forget, you can also set fonts globally across the site, and this would be under the tag or something else. This is why you should use an inspector tool, because this difficulty is overcome).

     
     
  
  
  
  

How to interpret the font-family css:

The font-family property will determine what the fonts are. In this property, fonts will be seperated with commas. When rendering the page, a browser will look through this list and use the first font in it that is on the computer. In many cases, there is also a font category at the end of this property, which is just a "just-in-case" so that the default font for that category is used if no others are available.

An example: Let's say that this is some css for a

enclosure.

p.thisisasampleclass
{
font-family: Calibri, "Comic Sans MS", Georgia, sans-serif;
}

Here, the browser will first try to use Calibri, if the font is available. If not, it uses Comic Sans MS, or Georgia, or just the default sans-serif font if the others aren't available.

This is how you can find out what fonts are being used. I have not found any well-built and helpful tools that visualize the CSS in a very nice way, but I think that the Inspector option will work for you (it's not too confusing!). I think that this is the way to go.

Example of how to find NYTimes fonts with an Inspector tool:

I'm going to walk you through how to find the fonts for the main text body of a NYTimes article with Google Chrome.

1. 
   

   Go to an article on NYTimes.com, right click on a text element you want to find the fonts for, and hit Inspect Element.

   
   

   

   
   


2. 
   

   Look at the side-bar on the right. In the Computed Style dropdown, you will see the CSS properties for this element. However, as you can see, there is no font-family property here currently, which means that the fonts are defined globally, not just for this specific element. However, there's a way to get around this!

   
   

   

   
   


3. 
   

   This is what you do: Select the radio button next to "Show inherited".

   
   

   

   
   


4. 
   

   A lot of other global properties will appear under "Computed Style".

   
   

   

   
   


5. 
   

   Scroll down in the list to "font-family". It should be in gray, meaning that it's an inherited global property. Here, you can see the fonts used! Ta-da!