Ajax Girl

Lalit Patel has created a nice Javascript/CSS font detector:

This Javascript code can be used to guess if a particular font is present on the users machine. It uses simple Javascript and some CSS rules to check whether that font is available. This may help desktop-like web application developers when they want to provide different skins or fonts preferences to their users. This may also help various blog skin designers who can provide different fonts for different users based on the list of fonts that their users have.

How does it work?

This code works on the simple principle that each character appears differently in different fonts. So different fonts will take different width and height for the same string of characters of same font-size.

We try to create a string with a specified font-face. If the font-face is not available, it takes up the font-face of the parent element. We then compare the width of the string with the specified font-face and width of the string with the font-face of the parent element, if they are different, then the font exists, otherwise not.

Source: Ajaxian
Original Article: http://ajaxian.com/archives/javascriptcss-font-detector