Puttin' the eek back in geek

How to be absolutely, positively, double definitely sure your web font renders

November 20, 2013

While testing @font-face support in some of our client’s browsers, we were getting false positives for Internet Explorer. Our tests said they supported @font-face, but our custom fonts didn’t show up. We were using Paul Irish’s @font-face feature detection, which checks if a font is actually being rendered in modern browsers, but relies on sniffing for IE.

Turns out IE will tell you it supports @font-face, even if font downloading is disabled in the security settings.

The solution was to do the render-test for IE as well, so I created a little script inspired by Paul Irish’s groovy work. In the process, I had some fun simplifying the render-test and trying to come up with the smallest possible webfont.

How it works

The script works by simply rendering a ridiculously wide glyph for the minus-sign, and then check if it actually did get ridiculously wide. The browser’s default font, used when custom fonts aren’t supported, will render this up to 1em wide. When our test icon properly renders, it will be 10em wide. We check the ratio and if it’s way over 1:1, we got ourselves some @font-face support. Yay!

The smallest font file, like, ever

For this check I needed a super small webfont with just one single glyph. I tried to get the smallest possible file by following these steps:

  1. Produce an SVG file with a simple 10:1 rectangle
  2. Create a font set via Icomoon. I originally set the glyph to the space character as this is a required character anyway, so we’d actually have one single glyph in the font. But this glyph doesn’t render in my Chrome on Windows 7 (it does on Linux Mint), so I use another font where the test icon is set to the dash.
  3. I remove all excess metadata, like version, fontname etc. with TTFEdit so only the bare minimum is left.
  4. Finally the TTF is converted to WOFF with sfnt2woff to take advantage of it’s compression.

The resulting file size is just 660 bytes. Pretty sweet!

The pros:

The cons:

Check out the source on Github!