How to capture fonts from the websites?

Sometimes some websites have very cool fonts and they might even be freely available over the internet.

Is there a simple way (an app maybe) which can be used to find out which font the website is using??


Text fonts

You can view the source of the page and then look for the stylesheet. This would be in the files ending in .css

So for something like Super User, you would look at the source code and spot this (don't worry about the bit after the question mark (?)):

<link rel="stylesheet" href="http://sstatic.net/su/all.css?v=4372">

Then drill about inside looking for anything like this:

font-family:Consolas,Monaco,Lucida Console,Liberation Mono,
               DejaVu Sans Mono,Bitstream Vera Sans 

This will show you what the site is defaulting to use for text. If you have a matching font from that list on your computer, it will display. Otherwise, it would just continue until it hit something.

Fonts in images

For text used in any graphics, you could go to something like What The Font! and use the guessing machine to pinpoint what font the site might have used.


Following on from é_ho's answer, if What The Font fails you can use the Q&A interface at fonts.com to identify a font based on appearance. This quizzes you on aspects of the general font (such as serif/sans-serif, italicised etc.) and on the properties of individual letters (such as "How many terminals does the top of the upper-case 'W' have?") to filter the fonts to only those that have the desired characteristics.

http://www.dafont.com/ is a great resource for free or similar fonts when you've found something you like.


To figure out what font is preferred according to the CSS, see the excellent Firebug add-on for Firefox, or the built-in Web Inspector in Safari. (See Utility to determine the font used on a site?)

As there are only a few fonts that are available on most computers, some web sites use dynamically generated images to replace the actual text. However, not all font license agreements allow for using fonts on a website, while personal license agreements allow usage on specific websites only. That's why, for example, cufón ensures that the font is only used on the website the replacement was designed for. One cannot use such fonts on other domains then.

According to cufón:

See Fonts and the Law at fontembedding.com for more information. Fonts produced by the following foundries/vendors/creators are known to be safe: Adobe Systems. The following are known to require separate or extended licenses for Web Embedding: Berthold (separate), FontFont (separate), Fontsmith (separate), Hoefler & Frere-Jones (separate), ITC (separate), Linotype (extended).


There is an iPhone app for WhatTheFont available, which allows you to take snapshots of a piece of thext and submit it to the What The Font! website for analysis, if you see a nice font on a billboard, for example.