fonts_loading_api_test.md

Test code

var hasRobotoLatin = () => document.fonts.check('16px Roboto', 'test');
var hasRobotoCyrilic = () => document.fonts.check('16px Roboto', 'п');;

var log = (tag) => {
  console.log(tag, {
    hasRobotoLatin: hasRobotoLatin(),
    hasRobotoCyrilic: hasRobotoCyrilic()
  });
};

log('initially');

var face = new FontFace(
  'Roboto',
  "url(https://fonts.gstatic.com/s/roboto/v15/uYECMKoHcO9x1wdmbyHIm3-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2')",
  { unicodeRange: 'U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F' }
);

log('FontFace created');

var loading = face.load();

log('FontFace loading');

loading
  .then(() => log('FontFace loaded'))
  .then(() => {
    document.fonts.add(face);
    log('FontFace added');
  });

Chrome

initially Object {hasRobotoLatin: false, hasRobotoCyrilic: false} // correct according to "latest" spec, not draft
FontFace created Object {hasRobotoLatin: false, hasRobotoCyrilic: false} // same
FontFace loading Object {hasRobotoLatin: false, hasRobotoCyrilic: false} // Loading outside of FontFaceSet, should throw as per draft?
FontFace loaded Object {hasRobotoLatin: false, hasRobotoCyrilic: false} // same
FontFace added Object {hasRobotoLatin: true, hasRobotoCyrilic: true} // correct

Firefox

initially Object { hasRobotoLatin: true, hasRobotoCyrilic: true } // should be both false, not spec compliant
FontFace created Object { hasRobotoLatin: true, hasRobotoCyrilic: true } // same
FontFace loading Object { hasRobotoLatin: true, hasRobotoCyrilic: true } // same
FontFace loaded Object { hasRobotoLatin: true, hasRobotoCyrilic: true } // same?
FontFace added Object { hasRobotoLatin: true, hasRobotoCyrilic: true }

Safari Tech Preview

initially – {hasRobotoLatin: true, hasRobotoCyrilic: true} // should be both false, not spec compliant
FontFace created – {hasRobotoLatin: true, hasRobotoCyrilic: true} // same
FontFace loading – {hasRobotoLatin: true, hasRobotoCyrilic: true} // same

// Next events were not fired. Seems like loading promise simply wasn't resolved

Unfortunately, it looks like Safari ToT does fire the events, which means this problem is likely caused by a merge problem between ToT and the STP branch.

Using ToT WebKit, the log shows:

[Log] initially (fontloading.html, line 13)
Object
hasRobotoCyrilic: true
hasRobotoLatin: true
Object Prototype

[Log] FontFace created (fontloading.html, line 13)
Object
hasRobotoCyrilic: true
hasRobotoLatin: true
Object Prototype

[Log] FontFace loading (fontloading.html, line 13)
Object
hasRobotoCyrilic: true
hasRobotoLatin: true
Object Prototype

[Log] FontFace loaded (fontloading.html, line 13)
Object
hasRobotoCyrilic: true
hasRobotoLatin: true
Object Prototype

[Log] FontFace added (fontloading.html, line 13)
Object
hasRobotoCyrilic: true
hasRobotoLatin: true
Object Prototype

The above test was run from a file: URL. Maybe the bug only reproduces if the origin is a real domain?

Do not know what to say. I still have same problem even in Tech Preview v2, at least I think that it's v2 because there is update for in AppStore, so it probably updated in background while I was away. But, I recorder a video which demonstrates the problem:

https://youtu.be/LRlfF4yK62s

I can reproduce this on GitHub!!!! Investigating now.

You're right that this is about CSP. The console logs:

"Refused to load https://fonts.gstatic.com/s/roboto/v15/uYECMKoHcO9x1wdmbyHIm3-_kf6ByYO6CLYdB4HQE-Y.woff2 because it does not appear in the font-src directive of the Content Security Policy."

I'm working on this in https://bugs.webkit.org/show_bug.cgi?id=156605

Great! Glad that it helped :-)