New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Comments

Projects
None yet
3 participants
@nhoizey

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

First attempt at fixing #13. Note that it is not trivial to know what…
… 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

This comment has been minimized.

Show comment
Hide comment
@zachleat

zachleat Jan 1, 2015

Owner

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.

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

This comment has been minimized.

Show comment
Hide comment
@zachleat

zachleat Jan 23, 2015

Owner

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

Owner

zachleat commented Jan 23, 2015

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

@zachleat

This comment has been minimized.

Show comment
Hide comment
@zachleat

zachleat Feb 18, 2015

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.

Owner

zachleat commented Feb 18, 2015

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

This comment has been minimized.

Show comment
Hide comment
@bramstein

bramstein Feb 18, 2015

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

bramstein commented Feb 18, 2015

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 join this conversation on GitHub. Already have an account? Sign in to comment