Skip to content
This repository was archived by the owner on Mar 5, 2024. It is now read-only.

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

Open
nhoizey opened this issue Dec 2, 2014 · 4 comments
Assignees

Comments

@nhoizey
Copy link

nhoizey commented Dec 2, 2014

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 added a commit that referenced this issue Jan 1, 2015
… font weight has been loaded. Also, be warned that faux-bolding will make the script think a bold weight has loaded when it has not.
@zachleat
Copy link
Owner

zachleat commented Jan 1, 2015

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
Copy link
Owner

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

@zachleat
Copy link
Owner

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
Copy link

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).

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants