Tuesday, March 10th, 2009

fontAvailable: Test to see if a font is usable

Category: jQuery

Howard Rauscher has wrapped up a little script to test the users browser for a particular font support. fontAvailable is a jQuery plugin, but can easily be tweaked to be independent:

javascript

  1. /* fontAvailable jQuery Plugin, v1.0
  2.  *
  3.  * Copyright (c) 2009, Howard Rauscher
  4.  * Licensed under the MIT License
  5.  */
  6.  
  7. (function($) {
  8.     $.fontAvailable = function(fontName) {
  9.         var element, width;
  10.        
  11.         // prepare element, and append to DOM
  12.         element = $(document.createElement('span'))
  13.             .css('visibility', 'hidden')
  14.             .html('abcdefghijklmnopqrstuvwxyz')
  15.             .appendTo(document.body);
  16.        
  17.         // get the width of element after applying a fake font
  18.         width = element
  19.             .css('font-family', '__FAKEFONT__')
  20.             .width();
  21.        
  22.         element.css('font-family', fontName);
  23.        
  24.         return (width !== element.width());
  25.     }
  26. })(jQuery);

Howard told us about the library:

The company I work for has been using Tahoma as the default font for about two years now. A couple of months ago I wanted to figure out approximately how many users actually support this font. I decided to convert this code into a jQuery plugin. It is a pretty simple solution and does not require any swf files like other methods I found. I attach an invisible span to the bottom of a document and apply a fake font to the element. I get the width of the element and then compare it to the width of the element after I apply the given font name. If the widths are different, then the font is available.

Posted by Dion Almaer at 8:58 am
12 Comments

+++--
3.1 rating from 35 votes

12 Comments »

Comments feed TrackBack URI

un-removed element a part, is this method that reliable? As example, times new roman returns false on windows … and I wonder how many fonts with the same character size could return false as well.

Comment by WebReflection — March 10, 2009

yep, that’s what I meant when I talked about times new roman but generally speaking, if charater width is the same of the default font, even if the height is different this function will return false.
Finally, as I already said, that element should be removed before the return ;-)

Comment by WebReflection — March 10, 2009

This will fail when the default font is the same as the one you’re querying.

Comment by JimmyP22 — March 10, 2009

Yeah, testing for the default font is definitely a case where it breaks. I a couple of different revisions where I try to handle that case, and they all pretty much fail. The reason I submitted it to Ajaxian is so I could get ideas and some feedback.

@WebReflection
I never thought about checking for the height of the test element. Thanks

Comment by howardrauscher — March 10, 2009

I think it would be better to set the font family to “monospace” and then to “__FAKEFONT__, monospace”. Then comapre the widths. This will of course not work for monospaced fonts, but use of monospaced font is a very rare case.

Comment by karf — March 10, 2009

Sooooooo, spill the beans Howard – How many of your users had Tahoma installed?

As for those worried about a few edge cases – this test could probably be beefed up by testing against a few different faces rather then just a fake font — for example test against “fake font” but also the monospace, serif and sans-serif generic families so you have a number of matrix to work off of. Even the most controlled environments [either by user preferences or by device type] will probably have different fonts set up for the different generics.

Comment by ChrisCasciano — March 10, 2009

@ChrisCasciano
~85% of of home page views had tahoma. Even thought this number was a rough approximation and has to be taken with a grain of salt, I was hoping the number to be a lot lower so I would have a good reason to push for a wider used font like Arial.

I have been experimenting with a couple of different methods to make it more accurate. Testing against a matrix of generic families is a good idea.

Comment by howardrauscher — March 10, 2009

I can’t believe this is hosted on Google Code. It seems more suited as a blog entry.

Comment by Jordan1 — March 10, 2009

Should probably set the font-size as well. Don’t ya think?

Comment by ajaxery — March 10, 2009

You should probably do some cleaning up in the plugin. Multiple checks will mean a tonne of useless spans within the DOM.

Comment by JimmyP22 — March 10, 2009

Similar: http://ajaxian.com/archives/javascriptcss-font-detector

Comment by lalitpatel — March 11, 2009

To handle the case where you’re checking the font it’s checked against, you can just check against two different fonts.

Here’s the implementation in Cappuccino: http://gist.github.com/280north/cappuccino/blob/89516d4a3817f0c098afa220486e36211ceab24d/AppKit/CPFontManager.j

Comment by tlrobinson — March 11, 2009

Leave a comment

You must be logged in to post a comment.