Doesn't check loading of several fonts with same name but different font-weights

[nhoizey]

The demo head demo loads two fonts with the same name but different font-weights.

http://fonts.googleapis.com/css?family=Raleway:600,400 gives this:

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), url(http://fonts.gstatic.com/s/raleway/v9/cIFypx4yrWPDz3zOxk7hIQLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  src: local('Raleway SemiBold'), local('Raleway-SemiBold'), url(http://fonts.gstatic.com/s/raleway/v9/xkvoNo9fC8O2RDydKj12b73hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');
}

The script doesn't check if both are loaded, confirmed by @zachleat in this tweet.

[zachleat]

Hm, I spent quite a bit of time trying to pass the loaded font-weight in as an argument to the success callback, but I don’t think that’s going to work. It’s trivial to do with the CSS Font Loading API but not with the fallback behavior. I’m open to ideas!

Consider the scenarios:

• Load a 400 weight and expect a 400 weight: OK.
• Load a 400 weight and expect a 600 weight: Error-ish—browsers exhibit a faux bolding that will incorrectly report that a 600 weight has been loaded. This may be OK enough for our purposes.
• Load a 600 weight and expect a 400 weight: Error—using @font-face with a font-weight: 600 and using the test element <div style="font-family:MyCustom; font-weight: 400"> will still use the new font family. It thinks 400 has loaded but it’s actually using 600.
• Load a 600 weight and expect a 600 weight: OK.

So, in the font-weight branch, I’ve included a version of the script that runs through the font-weights and tests how many have unique dimensions. If you’re loading 9 weights and there are 9 unique dimensions, it will trigger a success callback. You get one callback when all your weights have loaded.

Of note, this does not work around faux bolding. I think this is OK-ish. Open to suggestions, of course.

I haven’t decided yet if this is worth merging into master (it’s about a 20% growth in GZIP file size), but it’s available for use in that branch.

[zachleat]

font-synthesis could be used for this, but browser support isn’t great.

[zachleat]

Hm, I tested out fontfaceobserver https://github.com/bramstein/fontfaceobserver to see if he had a better approach for this and it would seem to also trigger callbacks for the faux versions.

cc-ing @bramstein just so he’s aware.

[bramstein]

Yea, this is a known problem. The Web Font Loader has the same issue. I think the only work-around is font-synthesis or renaming the font while loading it and renaming it back afterwards (but browser support for that is iffy --- at least if you want to do it without re-parsing the font).