How to detect if a font is installed (only using JavaScript)

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

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.

19 Responses to “How to detect if a font is installed (only using JavaScript)”

  1. Pain in the back-side designers like myself *may* have banished Comic Sans from their computer altogether ;) — Just a heads-up.
    Clever solution!

  2. Interestingly, the iPod Touch (and I guess the iPhone) doesn’t include Comic Sans either, it defaults across to Helvetica (…I think).

  3. Very clever, Remy. I love it!

  4. I hope that font-family.com will be populated with some sexy font stacks like the ones from http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ and hopefully using more of the new vista fonts.. :)
    good stuff.

  5. yes it’s great that the need for used for the cms or portal that want to have the great user inter face based on fonts.
    good luck much more… :)

  6. I was searching for text replacement methods and came across you blog and thought I’d share a little knowledge if you haven’t already heard about it.

    Look into Cufón, instead of falling back on system fonts that may or may not be installed.

    Granted, there are downsides to Cufón, but as do most text replacement solutions at this point…. Hopefully CSS3 isn’t to far off from being completely integrated into most if not all browsers!

    Your friendly neighbourhood,
    Smccullough

  7. @Smccullough: Cufón creates a little bit unsharp fonts. So I’ve been looking for something like this script. The fonts on my web site are only replaced by Cufón, if the user hasn’t installed them.

  8. This is exactly what i need! It make work simple…

  9. EXCELENT!…but…only for jquery?…what about mootools?

  10. This doesn’t seem to work with Safari – at least Safari on Windows.

  11. I looked at the code pretty genius outstanding good job

  12. Under what license it that plugin?

  13. @Tas,

    Check out the license info on the sidebar =>

    “”"
    License

    Unless otherwise stated, all articles on this blog are released under a Creative Commons Attribution-Noncommercial-Share Alike 2.0 UK: England & Wales License
    “”"

  14. Thanks for the simple script– it works well for installed fonts. However, it seems when checking for _@font-face downloaded fonts_ that it only successfully detects in Internet Explorer. Could it be order of download in Firefox?

  15. The problem with FF (and maybe some other browsers) is that it takes it a moment to change the font, and the check is happening instantly.

    What you need to do is a setTimeout of 1ms just before checking whether the web font has been used.

  16. Using setTimeout seems like an easy race condition. There’s no guarantee that any given length of time will be enough… maybe the user’s machine is crawling very slowly.

  17. I am planning to use this script for font detection.

    Is there any license that this script adheres to for its use? or it can used by anyone with modifications if necessary?

  18. It’s all MIT.

  19. Awesome. But if you would ever find out how to accomplish this with native/vanilla Javascript, that would be a really miraculous discovery. I rarely use jQuery, and having to include it just for font presence detection would possibly mean a longer rendering time that standard using webfonts for fonts other than serif and non-serif.

Leave a Reply
Not required

CODE: Please escape code and wrap in <pre><code>, doing so will automatically syntax highlight