Snippet: Font Detection with Prototype

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);
    }
  }))();
});

Hey, Thanks for letting us

Hey,
Thanks for letting us know about this code, it is really great.

Regards
Andy

It is nice of you to have

It is nice of you to have shared this code with us. I will defintly try to incoperate it in one of my upcoming sites. Sure that you would have a mention in it and I will let you know the details also, really soon.

Thanks

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.