How to tell when an @font-face rule is applied

Question

Is there any way to tell when an @font-face rule is applied? I'm creating @font-face rules that use data: URIs from a font file requested with an synchronous XMLHttpRequest in JavaScript and then write text to a canvas element using the font right away. The thing is that it doesn't actually use the font when drawing the text for the first few milliseconds. My current solution is to block execution for a few milliseconds by sending a synchronous XMLHttpRequest, which is a terrible solution.

I cannot make this asynchronous as it is for implementing Processing's loadFont() function, which is synchronous, in Processing.js.

I would prefer that the solution not check the dimensions of character as there's no guarantee that the font has a certain character and that its dimensions are different from the same character of the current font.

Answer 1

Short answer: browsers are not good enough yet to let us test for "loaded and ready for use" without actually using the font and verifying it.

Long answer: Pjs comes with a built in font validator for font preloads (related to https://github.com/pomax/font.js) but as you point out, that will not work with @font-face rules that use a data-uri. A workaround that I would suggest (although I've not tried this yet. I'm just guessing it'll work based on my work on Processing.js and font loading in browsers) is to use two PGraphic offscreen buffers. Make them both white background with black fill text, do a text("X",0,0) on the first buffer, and then after your font load, use the second buffer to perform the same text("X",0,0"). Grab the pixel[] for each buffer, and do a side by side comparison:

boolean verifyFontLoad() {
  buffer1.loadPixels();
  buffer2.loadPixels();
  for (int i=0; i<buffer1.pixels.length; i++) {
    if (buffer1.pixels[i] != buffer2.pixels[i]) {
      return false; }}
  return true;
}

when you load your font, have a tracking boolean somewhere that indicates font load state, intiliased to "false", and after loading your font, at the start of draw() call

void draw() {
  // code that does not rely on your font
  [...]

  // check state
  if(!fontLoaded) { fontLoaded = verifyFontLoaded(); }
  // not ready? "stop" drawing.
  if(!fontLoaded) { return; }
  // font ready. run code that relies on the font being ready
  else {
    // code that depends on your font being available goes here.
  }
}

Now at least you can avoid the first few frames where the browser has finished unpacking your data-uri font and loaded it as @font-face resource, but hasn't had a time to pass it over to the Canvas2D rendering system yet.

(styling a DOM element at this point with the font would actually work fine, it's actually getting it handed over to Canvas2D that is causing it to not be usable one or more frames)

Answer 2

Even though you don't prefer a dimension check, that is how the Modernizr @font-face feature detection works and may be the best way:

Modernizr embeds a tiny font glyph using a data: URI. In this, the single "." character is created; it is then applied to a temporary element whose innerHTML is set to '........' and whose width is measured, first with a basic serif font and then with the custom font applied. If the width is different, we know the browser rendered the new font data we supplied.