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.

Lazer

Posted 2009-09-18T13:46:15.250

Reputation: 13 841

@Arjan why :-( ? I have explicitly mentioned what I am not looking for, which was the subject of most of the answers there. – Lazer – 2009-09-18T23:39:42.903

Firefox has made this very easy nowadays, for a single page; see my updated answer.

– Arjan – 2013-12-29T12:28:16.413

Answers

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.

Go to an article on NYTimes.com, right click on a text element you want to find the fonts for, and hit Inspect Element.
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!
This is what you do: Select the radio button next to "Show inherited".
A lot of other global properties will appear under "Computed Style".
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!

Maxim Zaslavsky

Posted 2009-09-18T13:46:15.250

Reputation: 1 750

I'm going to add an example explanation for NYTimes right now. – Maxim Zaslavsky – 2009-09-18T19:09:13.213

thanks ppl

I love this place - www.superuser.com , even more now :) – Lazer – 2009-09-18T23:41:20.340

@Maximz2005, for some selections I am not getting the "Computed Style dropdown". I am just getting an empty Style dropdown. Why is that? – Lazer – 2009-09-19T00:03:43.867

@eSKay What's happening, I think, is that no exact element is being inspected. You should see an outline of the HTML elements to the left of the right side-bar, and if one isn't grayed, hover over them and look which are selected (you'll see an outline around the element on the rendered page itself). Next, click on the one you're looking for, and see if there are any things in the Styles dropdown! If this doesn't help, could you post a screenshot? Thanks! – Maxim Zaslavsky – 2009-09-19T09:25:17.040

@Maxim Z. i dont know what is happening. ive the screenshots but links cant be posted here i think, so you'll have to copy paste them to see. Here are the links: http://imgur.com/ZakAe.jpg http://imgur.com/8nqj1.jpg .I am not able to get the computed style tab for most of the parts i click. actually it appeared for one or two initial clicks but not after that. you've already helped me a lot. thanks for everything.

– Lazer – 2009-09-19T16:32:25.987

@eSKay hmm, very strange... im going to try to reproduce what the error is... btw what version of Chrome are you using? – Maxim Zaslavsky – 2009-09-19T18:44:35.753

@Maxim Z. 4.0.206.1 – Lazer – 2009-09-20T15:46:27.567

@eSKay hmm, im not sure if inspector is fully developed for that beta - im using 3.0.195.21 – Maxim Zaslavsky – 2009-09-20T22:58:00.503

1As the inspector is really the WebKit inspector, I assume a later beta will include a more recent version of WebKit as well? A newer version could show new bugs, of course, but I wonder if it's likely you just encountered one. Is there any way to show the WebKit version that is used in Chrome? – Arjan – 2009-09-22T09:02:17.347

@Arjan you can find the WebKit version by browsing to about:version in Google Chrome. There is a field for the WebKit version. Yay! – Maxim Zaslavsky – 2009-09-22T22:25:07.160

1mine is WebKit 532.0

@Maxim Z. I tried out in my friend's chrome (version 3.something). It works perfectly there. I finally can detect fonts the way I wanted. Now I understand how cool the "inspect element" feature really is. – Lazer – 2009-09-23T00:20:39.587

@eSKay yay! Congratulations! I just LOVE Inspector! – Maxim Zaslavsky – 2009-09-23T03:15:48.593

There are two different things:

Which font is actually used (by the browser/operating system).
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:

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:

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.

Arjan

Posted 2009-09-18T13:46:15.250

Reputation: 29 084

How did you get these fade screenshots? Looks like Mac, any chance of getting similar effect on Vista or XP? – Lazer – 2010-07-22T16:23:51.563

@Lazer, Skitch on a Mac (but the shadows are kind of standard and kind of required, as OS X has very thin window borders, if any). Don't know how to get it done on Windows. – Arjan – 2010-07-22T16:39:40.823

+1 For a much more detailed answer then mine. – BinaryMisfit – 2009-09-18T19:02:19.327

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

Ludwig Weinzierl

Posted 2009-09-18T13:46:15.250

Reputation: 7 695

Font Finder is exactly what I was looking for. If only there was similar extension for Chrome. – kangax – 2011-02-13T19:47:33.877

@kangax, there is nowadays; see Alec's answer

– Arjan – 2013-03-03T13:01:13.250

And @kangax, nowadays Firefox and Chrome have built-in tools to determine the real font. No more guessing. – Arjan – 2014-01-01T12:10:39.377

This is by far the best solution I have come across. It's a bookmarklet / extension that will 99% of the time tell you for sure what font is being used, by comparing the pixels of the displayed text with those of every font available, including TypeKit and Google Font API fonts.

WhatFont Tool

enter image description here

Check it out.

Max

Posted 2009-09-18T13:46:15.250

Reputation: 637

Nice, very nice, but I don't think it's actually comparing pixels (nowadays)? When the CSS just says font-family: sans-serif then that's also what's reported—but that by itself is not a font. When using font-family: someUnknownFont I get (default font) as the result, which then is actually Times on my Mac. (Tested with the bookmarklet, using this JS Bin; screenshot.) Still, again: nice!

– Arjan – 2013-03-03T11:32:04.107

@Arjun I examined it in some detail a couple months back, so I'll explain as well as I can remember. Under the hood, it does two things. It uses window.getComputedStyle to get the computed font-family. It then iterates this stack, comparing the pixels of each font with the displayed pixels. The first match is the one that is shown in italic in the pop-up, the rest are shown normally. If there is no match, it'll show (default font). The reason you're seeing sans-serif is because it correctly matches it to the sans-serif font, it currently however doesn't discern any further. – Max – 2013-03-08T00:12:24.540

Firefox is my new best friend for this; see my updated answer :-)

– Arjan – 2013-12-29T12:24:50.830

I don't know of any software. I just used Internet Explorer and found that the font used is:

font-family:georgia,"times new roman",times,serif

This is the main font. Searching the stylesheet for anything with font-family will provide the rest.

Process:

Right Click on Home Page
Looks for the rel=stylesheet line and the attached stylesheet URL
Copy and paste into browser and download the css file.
Open in text editor.

If you looking for the font in the images that will not be defined outside of the image.

_{Yes I was extremely bored. It is Friday afternoon after all. I did not post the link since they update the stylesheet regurlarly.}

BinaryMisfit

Posted 2009-09-18T13:46:15.250

Reputation: 19 955

According to Wikipedia, both georgia and times new roman are typefaces. So, what does the result mean? A combination of those two typefaces? – Lazer – 2010-07-22T16:31:03.357

Uhuh, Firebug in Firefox, or Web Inspector in Safari...? – Arjan – 2009-09-18T13:55:00.650

1As I said. I was bored. Change for your flavour of Browser and view source. There are other tools, but keeping it simple is not neccessarily the wrong approach. – BinaryMisfit – 2009-09-18T13:57:04.577

Good for the fact alone that it teaches the user something other than always relying on Firefox. – random – 2009-09-18T14:20:20.780

You can use the Web Developer Firefox extension to see all styles used by a specific portion of a web page. Use the CSS menu, View style information. Then click on the text you want to analyse, and search for the "font-family" property in the results.

Etienne Dechamps

Posted 2009-09-18T13:46:15.250

Reputation: 1 662

Information » Display Element Information works better (it will show inherited styles as well, and you don't need to search yourself). – Arjan – 2009-09-18T18:31:30.217

Contrary to what a lot of people have said, it's NOT always just a matter of viewing source etc - depends if the CSS is in the document or in an external css file. If it's external, you can't just view the source and find the font-family tag as it's not actually there in the file.

The poster advising to use Google Chrome actually has given a very good tip - I learnt something here and wanted to add an extra tip. In the developer tools that comes up in Chrome, you MIGHT have to click on "Computed Style" then click the "Show Inherited" tick box then scroll down before you find it - this is an extreme example, but where it shows will depend on how the page has been structured.

Matt - Christian Dating

Posted 2009-09-18T13:46:15.250

Reputation:

Here is a simple, but efficient, solution: a bookmarklet that shows you the config applied to an element (including the font-family).

Jesse's Bookmarklets Site has a good one for this job: computed styles.

Here you go: https://www.squarefree.com/bookmarklets/webdevel.html#computed_styles

Adriano P

Posted 2009-09-18T13:46:15.250

Reputation: 385

-1

if that is not a inline css just open the page on source view. Copy the css address like "/themes/01.css" paste on browser url. Copy the return paste in text editor or css editor. Use find to fine font or font-family done. The listed font family using to display the page font for size and other attribute like bold, italic etc.

Thanks doronto

Get a free back link

Posted 2009-09-18T13:46:15.250

Reputation: 1