How to Check What Fonts Are Installed on MAChines via the Web

Is there a way to check what fonts are installed on machines via the web?

There is a script that renders a bunch of DIVs in different fonts, then checks to see if the resulting DIV has the right dimensions for the given font.

http://www.lalit.org/lab/javascript-css-font-detect

Check a Font is installed in Client machine in ASP.NET

If you need a specific font, see http://msdn.microsoft.com/en-us/library/ms533034(VS.85).aspx - you can embed fonts in HTML without requiring the font to be installed on the end users computer.

list every font a user's browser can display

The JavaScript version is a bit flaky. It gets fonts by iterating through known fonts and testing.

The most accurate way (albeit having to use a propriety plugin) is to use Flash. Here you can get the list of fonts without having to test for them individually using dimensions.

You are going have to decide whether to have an exact list at the expense of not working on some devices ( iDevices, browsers without Flash plugin, etc), or a partial list with better support via JavaScript only.

How to detect which one of the defined font was used in a web page?

I've seen it done in a kind of iffy, but pretty reliable way. Basically, an element is set to use a specific font and a string is set to that element. If the font set for the element does not exist, it takes the font of the parent element. So, what they do is measure the width of the rendered string. If it matches what they expected for the desired font as opposed to the derived font, it's present. This won't work for monospaced fonts.

Here's where it came from:
Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)

How can I determine what font a browser is actually using to render some text?

The FontFinder plugin for Firefox does exactly what you want. After installing, highlight a block of text, right click and go to FontFinder -> Analyze Selection. It will tell you the actual font being used as well as a other information like font-family, spacing, color, etc.

Note that per Wilfred Hughes' answer, Firefox now supports this natively. This article has more details.

How to iterate the installed fonts using javascript?

To start off, you might want to check what fonts are installed on the client. Read up on https://www.lalit.org/wordpress/wp-content/uploads/2008/05/fontdetect.js?ver=0.3

You need to have your own list of fonts to check, then you have an array of installed fonts by checking each of the list to see which one is installed.

The difference in widths will tell you the availability of the fonts installed on the client's computers because the browser will fall back to its default font. So you probably need to do some invisible testing for text widths to determine if a font is installed.