876439 - Open Sans Light font weight not displaying in IE7/8

Status: RESOLVED FIXED

(www.mozilla.org :: General, defect, P4)

Description

[Steven Garrity [:sgarrity]]

The mozilla.org site uses Open Sans and the Open Sans light variation throughout. The light variation is falling back to the normal weight in IE7 and IE8. It works properly in other browsers and in IE9+

Not sure what the problem is yet - investigate'n.

Comment 1

[Kohei Yoshino [:kohei]]

This one? http://www.kristengrote.com/blog/articles/google-web-fonts-playing-nicely-in-every-browser

Comment 2

[Kohei Yoshino [:kohei]]

http://stackoverflow.com/questions/3694060/how-to-make-google-fonts-work-in-ie

Comment 3

[Steven Garrity [:sgarrity]]

Things go awry after this commit: https://github.com/mozilla/bedrock/commit/f22d212811e68fcb396e8388dd30dd3c0f19d75f#media/css/sandstone/fonts.less

Comment 4

[Steven Garrity [:sgarrity]]

Craig, this seems to have broken after this commit which I think was related to the bug 797379 state-of-mozilla-2011 work. Do you know why adding the font-weight:bold; variation for Open Sans Light was necessary?

Comment 5

[Craig Cook (:craigcook)]

(In reply to Steven Garrity from comment #4)
> Craig, this seems to have broken after this commit which I think was related
> to the bug 797379 state-of-mozilla-2011 work. Do you know why adding the
> font-weight:bold; variation for Open Sans Light was necessary?

The design called for Light Italic and I think I just added the bold rule while I was at it, not for any specific need. I can't think offhand of anywhere something is both Light and Bold at present, but it could happen. 

And of course, there is no "Open Sans Light Bold" font, so Light Bold is just Regular, and I wonder if that's why IE 7/8 is using that font for all Light. Maybe it's just something with the order of declarations. We can try reordering things to see if it's as simple as that. 

I also know some older browsers don't play well with multiple variants of webfonts under the same name. It's how they're supposed to work, but proper support for it has only come more recently. That could be the root of it, too.

If it's only the bold rule mucking things up, we could eliminate that rule entirely if we don't need it and it's too problematic, but I thought it nice to have in case text is meant to be rendered in Open Sans Light, but also needs a bold weight for some reason (a <strong> in a headline or something).

Comment 6

[Steven Garrity [:sgarrity]]

The issue seems to be that IE7/8 get confused when two @font-face declarations point to the same font file.

In our case, were were pointing the 'bold' weight of "Open Sans Light" at the same font files as the 'normal' weight of "Open Sans".

I'm going to remove that "bold" Open Sans Light and leave another in there that calls a set of SemiBold open sans files. This seems to fix the IE7/8 issue and still provides a 'real' bold variant for cases where the Open Sans Light font is bold.

Comment 7

[Steven Garrity [:sgarrity]]

Pull request: https://github.com/mozilla/bedrock/pull/917

Please test/confirm.

Comment 8

[[github robot]]

Commit pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/d4215cefddf44677a3ea80a3a5ad3ab382e4d7f6
Remove additional font weight for IE7/8
Bug 876439

Comment 9

[Andrei Hajdukewycz [:sancus]]

Still needs verification but this looks fixed to me.

Comment 10

[raymond [:retornam] (inactive)]

Sancus,  I found a problem with IE10 when we pushed yesterday. That is why I left this unverified