List Every Font a User'S Browser Can Display

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 iterate the installed fonts using javascript?

To start off, you might want to check what fonts are installed on the client. Read up on http://www.lalit.org/lab/javascript-css-font-detect

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.

how to get list of font-family supported by browser

I suggest using the fonts that you want, rather than limiting yourself to the crossection of fonts supported by all browsers:

http://code.google.com/apis/webfonts/docs/getting_started.html#Quick_Start

How can I be sure all of my users have this font-family?

You can declare multiple fonts using the font-family rule. If the first font on the list is not available, the next will be used as a fallback. For example, if you set your font-family to the following:

font-family: 'Bookman Old Style', Arial, sans-serif;

the browser would at first try to load Bookman Old Style font, and if not available, it would try to load Arial font, and if it's not available too, it would load the default sans-serif font.

So when the user doesn't have this font installed, you can choose similar font which maybe is installed, so your webpage wouldn't look so ugly.

If you own this font (i.e. either it's free or you bought it), you can use @font-face declaration to include it on your page. For example:

@font-face {
  src: url("http://example.com/your-font.woff2");
  font-family: 'Your Font';
}
body {
  font-family: 'Your Font', Arial, sans-serif;
}

In this case browser will fetch the font from the URL you specified and apply it to <body>. If the request for font fails, or before the font has been loaded, browser will apply the fallback font (i.e. Arial).

is it possible to get available fonts list supported by browser in jsp using request object?

No, you cannot list the font using request object in JSP.
You can get system supported fonts using GraphicsEnvironment class

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

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

This answer original referenced the "Font Finder" plugin, but only because it was from 4 years ago. The fact that old answers linger like this and the community cannot update them is one of the few remaining failures of Stack Overflow.

List Every Font a User'S Browser Can Display