Evolution of Browser Font Checker with JS / CSS

Many people think but one do. There was a practice to use long list of fonts in html attribute because brower could not easily find if a font is in user's pc. In 2007 I came across Lalit Patel's font checker tool. It was based on following simple yet interesting idea

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.

The string which we will use to generate the widths can be anything. But I guess we use ‘m’ or ‘w’ because these two characters take up the maximum width. And we use a trailing ‘l’ so that the same width fonts-faces can get separated based on the width of l character.

Font checker Javascript got popularity was downloadable from here

Johan Sundström did hard work to make a table of common fonts and their size. You can find more here



It was ported to JQuery by howardr and adding font checker became only few lines of code like this

$(document).ready(function() {
if($.fontAvailable('tahoma')) {
    // analytic code here

});

There is another simiar interesting article here


Not the end fans of slim JS library mootools may have heard of David Walsh's implementation - he ported Font checker for mootools. It can be downloaded here

window.addEvent('domready', function(){
var fc = new FontChecker();
  $('start').addEvent('click', function(){
     $$('#font-list li').each(function(el){
       e.setStyle('color', fc.check(el.get('text'))? 'green': 'red');
       });
 });
});

Browser checker is a tremendous useful tool. Since many of recent users have lot of fonts, it can extend formatting of your web document while giving a chance of graceful exit.