In the pursuit of an idea I had recently, one tiny feature of the web site would be to detect whether the user had X font installed.

I've looked at flash solutions, since a SWF had access to enumerate the fonts, but ultimately if it could be done without flash, it would/should be faster and smarter.

So here's my pure JavaScript (okay, and a little CSS) solution: font.js

READER DISCOUNTSave $50 on terminal.training

I've published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.

Usage

Include the font.js script in your page.

It relies on jQuery so include that somewhere too.

$(document).ready(function () {
  font.setup(); // run setup when the DOM is ready
});

Then to test:

font.isInstalled(fontname); // returns true or false

Simple.

Example

I mention this little idea, and a fuller blog post on this later, but I've installed it and make use of it to preview a font-family list:

http://font-family.com/sandbox/optima,monaco,courier,random

How It Works

Comic Sans to the Rescue

For the first time in my career I've found a genuine use for Comic Sans. Due to it's huge Johnny Nomates status in typography circles, it's never been used as inspiration for any other fonts (I may generalising).

What makes this important is that: Comic Sans, in all it's glory, is actually unique.

From there it's a simple case of comparing the font in question against Comic Sans and if they match, it's not installed.

Basic Matching

Since we've no way to examine the font, nor look, programmatically, at the characters, we're limited to just checking the width of the rendered text.

As such, this can cause some false negatives if the font has characters exactly the same width as Comic Sans. However, this is less likely due, again, to it's uniqueness.

Tricks

The key to a successful match are two tricks:

  1. Large fonts. Having the font size cranked right up, increases the margin for errors, i.e. if there's a subtle difference that would be hidden between pixels, increasing the font exaggerates this making it easier to spot.
  2. Use wide letters. I'm using 'w' and 'm' against each other. It's almost arbitrary, but again, it increases the margin for error, and hence asserting the font is installed.