var baseFonts = ['monospace','sans-serif','sans'];

But I think you should change the last one to “serif” instead of “sans”. Like this:

var baseFonts = ['monospace','sans-serif','serif'];

sounds interesting. I am curious to see and test the updated version as soons as it is available.

Best regards,

Axel

I have uploaded a new version of my script. This should be almost 100% fool proof solution. Let me know your thoughts.

Sure, if you render the font large, these “jitter” will be smaller in relation to the font itself but it is not zero. Also important to know is, that there might exist customized corporate fonts which mostly have identical metrics to the source font but may be different in certain details. It is impossible to surely detect those fonts by simply measuring a string containing only 3 different faces of it.

Sure, in most cases this doesn’t happen and asking the question why would someone choose to use those fonts on a webpage may be understandable. But it might happen for some reason – e.g. in a near-wysiwyg-scenario for customizing print products without plugin technology or if some intranet stuff uses fonts to implement the corporate design without relying on cufon or sifr for some reason.

You can reduce the gap and increase accuracy for firefox or opera etc for example, if you query the computed style for these browsers. If you set a particular font and it does not exist, normal behaviour means to use a default font. Unfortunately getting the computed style in IE won’t be possible yet as far as i know (you might try to play with element.currentStyle in IE – i didn’t do this until now).

Anyhow your solution delivers surprisingly exact results with a view on it’s simplicity and therefore it might for most cases a good and specially easy to implement and small footprint compromise to perform font detection.