Is there a way to test what fonts are installed or maybe a way I can read out all of them? I want to do a survey in our product to see what fonts I can use on our projects.

Is there a way to test what fonts are installed or maybe a way I can read out all of them? I want to do a survey in our product to see what fonts I can use on our projects.

• javascript
• jquery
• css
• fonts

8 Answers 8

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

It is possible, so long as Flash is available. See http://www.maratz.com/blog/archives/2006/08/18/detect-visitors-fonts-with-flash/

Checkout the jQuery plug-in FontUnstack, from this question.

Here's a list of the most common fonts on windows and mac machines (with image comparisons of each one). I use it when selecting which fonts to use on a project.

There is no foolproof way of determining installed (and usable) fonts on a client machine through the browser.

Flash may allow you to do this, or possibly some crazy (but fun to write) JavaScript that makes assumptions about the size of elements with a given font - but this script may be susceptible to differences in client settings no matter how many cases it considers.

I would strongly recommend against the survey / deployment approach that you are proposing. You will have some impossible decisions to make - for example what percentage availability is acceptable? If it's 100%, what do you do when a new user comes along that doesn't have this font? If it's not, what proportion of your users are you comfortable with having a degraded experience?

Have you considered sIFR or simply an image element with appropriate alt attribute?

If you have specific typographic requirements, it may be worth keeping an eye on this: http://blog.typekit.com/.

You can get a list of fonts installed in the client OS with Flash:

var embeddedAndDeviceFonts:Array = Font.enumerateFonts(true);

You can then use the ExternalInterface to move this information between Flash and Javascript. It doesn't require much code.

Check out my blog post about it for more info and a demo implementation.

There is no good way of doing this. Though if you have a list of fonts you're wondering about, create a class with a always-present fallback:

span#knownfont{font-family:Verdana, font-size:12px;}
span#font1{font-family:NonExistingFont1, Verdana, font-size:12px;}
span#font2{font-family:NonExistingFont2, Verdana, font-size:12px;}

...

Then create HTML for each case:
<span id="knownfont">Lorem ipsum dolor sit amet</span>
<span id="font1">Lorem ipsum dolor sit amet</span>
<span id="font2">Lorem ipsum dolor sit amet</span>

Then write a script that compares the width of the known font-span and each of the others. If the width differs, the font exists on the client.

I know it's not supported by all browsers yet, but there's @font-face in css as described here, so if you know that your users are on IE (for example) you could use this to get the font.