A Tiny Web Font Loader

Today I'm releasing TinyWFL, my tiny web font loader which is about 95% smaller than other popular loaders.

When web fonts started to gain adoption around 2010, the problem people had was FOUT - the flash of unstyled text while you waited for the browser to download the font. I think most people would agree that this has since been solved very comprehensively by webfontloader from Google and Typekit, and that it's now the de-facto standard loader - but back in 2010 or 2011 FOUT was still an issue, which is why I wrote my own.

To be accurate, my loader doesn't actually load anything - it's more of a anti-FOUT aid. The idea behind avoiding FOUT is simple enough: characters are very rarely exactly the same size in different fonts, so if we put a few of them together in an HTML element and then measure its width we should get different values depending on which font it's using. If we measure the width for a font we know they'll have (ie a default font like serif), we can then compare that to the width of the web font we want to use; if they match, the web font hasn't loaded, so we use setTimeout to wait a bit, then we check again. Once we know they're loaded we can either fire off JavaScript functions, or set a CSS class somewhere which can be used by CSS rules to only show the font once it has loaded.

This weekend I wanted to add a 2KB reduced character set font to a site, and thought about replacing my 5 year old code with webfontloader - but that's when I looked at the file sizes. The minified version of webfontloader that's currently on their git master is 11.5KB, and the version on Google's CDN is 16.6KB. Of course those sizes aren't huge, but a loader here and a polyfill there is how you end up with big slow pages. Besides, it seems silly to use a library that is 8x larger than the font it's trying to help show - at best it'll still be 50-100% of your average web font.

By comparison TinyWFL is just 852 bytes. The reason it manages such a big difference is that it leaves out a bunch of features you won't need in most circumstances - and if you do need them, we've already got webfontloader.

You can find TinyWFL on github

As a reward for reading this far, have a couple of useful web font-related links:

  • Font Squirrel web font generator - upload a font and they'll generate an excellent optimised web font for you to use with TinyWFL.
  • IcoMoon app - upload vector images (or pick from their selection) to generate an icon font. It probably doesn't make much sense to use TinyWFL for icon fonts, but it's still a great service.

Leave a comment