IE: Issues :( incorrect webfont display

Question

Hey fellow Stackers! So I've run into a couple of strange IE only bugs on this website I'm coding for a friend.

I'm using the Google Webfont Raleway, font sizes: 300,400,700,900. However IE changes all font-weights to the 300 and does not use any of the others.

All tips and feedback appreciated!

Main Nav Font styles:

.nav_li { 
    float:left;
    margin: 0;
    list-style-type:none; 
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    line-height: 100px;
    color: #fff;
    cursor: pointer;
    -webkit-transition: background .5s; -moz-transition: background .5s; -ms-transition: background .5s; transition: background .5s;
}

Screenshots attached: enter image description here

I'm going to say this is some sort of caching issue. I have no issues with the site in any browser, including Internet Explorer. They look nearly identical. What version of IE is it ? — David, Sep 23 '12 at 18:17
I have IE9, but it looks like the 300 version of the font when I use the IE7 and 8 Document Mode. I'm on Windows 7, just cleared my IE cache and font didn't update. — Leon Gaban, Sep 23 '12 at 18:22
@David you said in your IE it looks fine? I just noticed this in mine: CSS3117: font-face failed cross-origin request. Resource access is restricted. — Leon Gaban, Sep 23 '12 at 19:33
I thought it looked fine but I then realised I was looking at the wrong part lol, I saw the difference in the navigation after that. — David, Sep 23 '12 at 20:08

score 2 · Answer 1 · answered Sep 23 '12 at 18:27

2

I ~~think~~ know this is a issue with Internet Explorer.

http://help.typekit.com/customer/portal/articles/6855-using-multiple-weights-and-styles

You can have up to 4 font weights per font (Which you're OK with), but IE also has other bugs with font-weight if you read that article.

Hopefully it helps :-).

answered Sep 23 '12 at 18:27

David

2,053
2
16
26

Thanks checking it out now! Oh my image problem is fixed, had a bad jpg, maybe because it started out on my Mac – Leon Gaban Sep 23 '12 at 18:33
I took it down to just 3 font weights and it still didnt work, I think my problem is the web server because of a font-face failed cross-origin request error I'm getting in IE. The Ruda font works fine so I guess I'll just use that in my ie-only css file. Thanks though, that link was helpful! – Leon Gaban Sep 23 '12 at 19:45

score 2 · Accepted Answer · answered Sep 23 '12 at 20:25

Problems like this are not uncommon in IE: some Google fonts, when used in the way recommended by Google (referring to code on Google server), just fail due to access restrictions. The way to avoid this is to download the fonts (using the “Download your Collection” link), process them with FontSquirrel, upload them onto your server (same that hosts your HTML documents), and use CSS @font-face code (as given by FontSquirrel) directly.

score 1 · Answer 3 · answered Sep 23 '12 at 18:24

1

According to Google's Technical Considerations

More generally, Internet Explorer's behavior may vary depending on the placement and existence of various elements. If you want to provide consistent behavior across all browsers, use the WebFont Loader. For example, you can choose to make all browsers behave like Firefox.

https://developers.google.com/webfonts/docs/webfont_loader

answered Sep 23 '12 at 18:24

Michał Miszczyszyn

11,835
2
35
53

1

Thanks I just tried it to no avail, I believe my problem is due to a web host / cross-origin request error that I don't feel like using the effort to fix just for IE :/ going to use Ruda instead and make my if you use IE8 or 7 please upgrade to a Modern browser page hehe – Leon Gaban Sep 23 '12 at 19:46
Absolutely. That is a great idea. I personally don't care about IE users at all. – Michał Miszczyszyn Sep 23 '12 at 19:59

IE: Issues :( incorrect webfont display

3 Answers3