This is essentially a clean house implementation of the font detection method described at lalit dot lab using Prototype 1.6. Another method described at maratz.com seems very interesting, since it uses Flash.

This is only usable after the DOM is ready. Call Font.detect with a string containing the name of the font to be detected. If it's detected as present, true is returned, otherwise, false.

A few browser behavior changes were taken into consideration. Both Firefox 3 and Safari 3 don't seem to behave the way described at lalit dot lab anymore. Instead of taking on the parent element's font when an element is set to an unknown font, the element seems to default to serif. Opera 9.25 still behaves the same way described in the article.

This code snippet is hereby placed in public domain. Use it to eliminate poverty or enslave humanity or do whatever you see fit. Although it would be nice if I get an honorable mention. I would love to see where this is applied, so it would be very preferable if you drop me a line if you use this on your site.

$(document).observe('dom:loaded', function() {
  window.Font = new (Class.create({
    initialize: function() {
      this.container = new Element('div').setStyle({
        fontFamily: 'serif', visibility: 'hidden', position: 'absolute',
        left: '-1000px', top: '-1000px'
      });
      this.detector = new Element('span').setStyle({
        fontFamily: 'serif', fontSize: '72px'
      }).update('mmmmmmmmmml');

      this.container.appendChild(this.detector);
      document.body.appendChild(this.container);
      Object.extend(this, this.detector.getDimensions());
    },

    detect: function(font) {
      var dimensions = this.detector.setStyle({
        fontFamily: '"#{font}"'.interpolate({font: font})
      }).getDimensions();

      if (font == 'serif' || /^Times/i.test(font)) return true;
      return (dimensions.width != this.width || 
              dimensions.height != this.height);
    }
  }))();
});