Utility to determine the font used on a site?

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 <font> tag or in the style attribute of a <p> or a <div> 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 <link> tags in the <head> 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 <body> 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 <p> 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.

    Opening the Inspector

  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!

    Viewing the element properties

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

    Select show inherited

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

    Many global properties appear

  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!

    Here are the fonts!


There are two different things:

  1. Which font is actually used (by the browser/operating system).
  2. Which font was requested (by the website creator).

1. Which (fallback) font is actually used

To know for sure which font is used in a specific browser on your computer/operating system, nowadays Firefox and Chrome have built-in tools for that. Like the Firefox Page Inspector has a Fonts View:

Firefox Fonts View

For more details, see How can I determine what font a browser is actually using to render some text? on Stack Overflow. That includes:

  • Text might include Unicode characters that are not in the font that is defined in the CSS, so multiple fonts might be used in a single element.
  • Not each browser on the same machine might use the same font type (such as TrueType, Apple Advanced Technology, Microsoft OpenType, OpenType PostScript) and hence might use different fonts. So you might need to determine which font is used in other browsers.

2. Which font was requested

To tell which font was requested (by the website creator), tools like the built-in Firefox Page Inspector or its Firebug extension help to inspect the CSS rules. Such tools do not tell you which font is actually used, but is does show which font is requested for a specific region, or even for a specific word, given the CSS stylesheet:

CSS in Firebug

The above shows Firebug. First select "Show computed style" in the Style menu on the right. Next, click the arrow button at the left. And then just click on the text of your interest. This will update the CSS style sheet information at the right. See the features to learn about the CSS functions.

Some Firebug Lite is also available for other browsers, but I never used that.

Web Inspector in Safari and Developer Tools in Chrome have similar options. (In Safari, enable the Web Inspector through the preferences: Show Develop menu in menu bar.) Internet Explorer has the F12 tools.

Like e-t172 noted: the Web Developer Toolbar for Firefox can also show this info. However, CSS » View Style Information does not show you any "inherited" ("cascaded") styles, but only information that is specific to the region you click. Instead, to get a kind of overlay and to actually see the font information you can use Information » Display Element Information instead. That will show the details whenever you click on the page somewhere.


If you use Firefox there is the Font Finder Add-on. It does basically what Maxim Z.described in his answer, but automatically, so it is really easy to use..

Tags:

Fonts

Software Rec

Website

Recent Posts