fontonload

Cross browser detecting web font loading, without checking by timer (setTimeout / setInterval).

中文

Usage

1. Patch your font with the patch.ttf file, which include a blank graph (non-spacing and no-marking) on U+FFFD
2. Declare the @font-face in your CSS.
3. Load the library.

FontOnload('fontname', {
  eotFile: './fonts/fontname.eot',
  success: function() {
  },
  fail: function(e) {
    console.log(e.name)
  }
})

You can check the demo page to see if it works.

How it Works

1. It uses the CSS Font Loading Module when available.
2. For browsers which can auto trigger scroll event. It uses a scroller element, which contains an U+FFFD character, to detect the font loading. When your patched font load, the height and width of the detection element will become 0, that will trigger a scroll event. It's similar to smhn's article, but more simple (no embedded font) in detection.
3. For IE 6 – 9, these browsers won't trigger a scroll event after height/width decreased. But fortunately I found that they don't have FOUT if the font file is in cache, so the code just preload the eot font to make sure the font file is in cache. The preload works is make by iframe, and detect the loading by it's onload event. (@font-face will block onload event)
4. It exclude the browser which don't support web font (BlackBerry 5/6, Opera Mini, Windows Phone 7/7.5)

Briefly, it works thanks to these 3 browser behaviors:

1. Modern browsers' document.fonts.load
2. Other browsers' scroll event when element size decrease
3. IE 6 – 9 block window.onload event until @font-face loaded & iframe.onload being detectable

License

MIT License