Preloading @font-face fonts?

Question

Is it possible to preload or otherwise cache @font-face fonts, most likely with javascript, before the page loads so you don\'t get that ugly jump when the page finally does

Answer 1

Proper font pre-loading is a big hole in the HTML5 spec. I've gone through all of this stuff and the most reliable solution I've found is to use Font.js:

http://pomax.nihongoresources.com/pages/Font.js/

You can use it to load fonts using the same API you use to load images

var anyFont = new Font();
anyFont.src = "fonts/fileName.otf";
anyFont.onload = function () {
  console.log("font loaded");
}

It's much simpler and more lightweight than Google's hulking Webfont Loader

Here's the github repo for Font.js:

https://github.com/Pomax/Font.js