Pugetworks
Seattle Software Developers

blog-archive

Pugetworks Blog Archive!

How to identify what font a web site is using

From time to time it's useful to find out what font a web site is using, either out of curiousity or because you like the look and want to use it in your own designs. A sufficiently geeky typophile may be able to instantly tell a Gill Sans from a Helvetica Neue just by the stroke width variability, but I understand that most people have better things to do.

Fortunately, it's not too difficult to track this information down. Here are a couple methods that should help you identify all but the most obscure fonts.

Method 1: Using Firebug(or Firebug Lite)

Firebug is a Firefox extension that any web designer or developer should already have installed. It does a lot of stuff, but one of its most basic functions is to identify the CSS rules associated with a particular element, including the font family.

Screenshot of firebug being used to identify a font

If the font you're looking for is being rendered by the browser (that is to say, it's not an image), you can use the Computed Styles tab to identify what font is being rendered. Okay, here are some step-by-step instructions:

  1. Install the Firebug extension for Mozilla Firefox (or Firebug Lite if you don't want to use Firefox).
  2. Navigate to the web site with the font you want to identify.
  3. Turn on Firebug's Inspection Mode by pressing ctrl-shift-cGeorgia (PC) or ⌘+Shift+C (Mac). This should work even if you're running Firebug Lite.
  4. Click the "Computed" tab in the panel on the right side of the Firebug window.
  5. Highlight an area of the screen where the font you want to identify is being used. Click on it.
  6. The name of the font should be listed under "font-family" in the Computed Styles tab. You might see a list of different fonts. In this case, the first font on the list that is installed on your computer already is the one that you're seeing on the web site.

If you don't see a list of fonts, or you know your font is part of an image file, proceed to Method 2.

Method 2: Using WhatTheFont (or Identifont)

When you want to know what font is contained in an image, you've got to either painstakingly compare the image to a large font library, learn PANOSE, or use WhatTheFont. WhatTheFont is an application created by type seller MyFonts.com. Using space-age technology combined with ancient magic it reads an image and identifies the font portrayed thereupon.

Some caveats, though: it works best when your image contains fairly large letters (they recommend around 100px high) on a highly-contrasting background. If your text is small or the background confusing, it's going to have a tough time figuring out what the text says (this is the same principle as a captcha, if you think about it). Plus, WhatTheFont can only recognize fonts it knows about already, which is only a small chunk of what's out there in the wild.

To use WhatTheFont, grab an image of the text in question, and (if possible) crop out as much of the background as you can using the image editing software of your choice. Save the file somewhere on your hard drive, and go to WhatTheFontto upload the image.  (They've got an iPhone app that lets you take a picture of the font you want to use. I haven't tried it, but it certainly sounds useful.)

The site will then ask you to verify that it has correctly guessed the letters in the image, and once you've done that that it will tell you what it thinks the font probably is. In my experience it gets it right more often than not, but unfortunately it's far from perfect.

Bonus: Identifont is a different application that does  the same thing as WhatTheFont, but instead of using character recognition software,  it asks you a series of questions about distinguishing characteristics of the font. It's a great alternative, especially if you don't have a proper digital image of the font you want to identify.

Conclusion

Between these two methods you ought to be able to identify most fonts you may come across, or at least be presented with some similar alternatives you can use for your designs.

DesignAdam