Why is IE10's "IE8 Standards" mode different from IE9's?

Question

I have the following HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=8" />
        <link href='https://fonts.googleapis.com/css?family=Bitter:400' rel='stylesheet' type='text/css'/>

        <style type="text/css">

        h1 {
            font-family: Bitter;
            font-weight: normal;            
        }
        </style>
    </head>
    <body>
        <h1>Why is this different?</h1>
    </body>
</html>

When viewed in IE9 on Windows 7 the Bitter font-face is loaded and applied correctly: HTML on IE9 Windows 7

But when viewed in IE10 on Windows 8 it is not, falling back on a default font-face (Times New Roman): HTML on IE10 Windows 8

As both browsers are using the same Document Mode (because of the X-UA-Compatible meta tag) I would have thought that both would either have the Bitter font or fail and fall back on the Times New Roman font. However, one is working (IE9 on Windows 7) and one is failing (IE10 on Windows 8)

Is this a known issue or documented feature?

I don't understand what you're asking. You're telling it to render as IE8, right? `` So the difference is probably in the settings for default font-size since you're doing nothing to compensate for that. — MetalFrog, Sep 25 '12 at 16:45
your lower image has low height & width than the upper one,take corrct ratio — Ravindra Bagale, Sep 25 '12 at 16:46
@MetalFrog I'm asking why those two pictures look different - I thought that X-UA-Compatible should maintain compatibility between browser versions. Obviously I am well aware that this is not always the case - I would just like to know if this is particular case is documented anywhere. — Andy Smith, Sep 25 '12 at 16:49
It *is* running how you want it to. It's telling you as much in your screen shots ("IE8 standards"). You're assigning a font-family and weight, but you do nothing to define size. How can you expect it to look the same? — MetalFrog, Sep 25 '12 at 17:26
What happens when you change Browser Mode to IE9 from IE10? Also, does the custom font work at all in IE10 / other browser/document modes? — Patrick, Sep 26 '12 at 06:27
@MetalFrog look at the difference in font. Top is custom font 'bitter' bottom is default ?Times New Roman? — Patrick, Sep 26 '12 at 06:28
@MetalFrog What Patrick said :). The fonts are different fonts, I have tried specifying the size but it does not change the Bitter/Times New Roman disparity. The reason I expect it to look the same is that I am using the same document mode. I have edited my question to provide further clarity. — Andy Smith, Sep 26 '12 at 08:36
@Patrick On IE10 when using IE9 or IE10 mode the Bitter font-face works perfectly - it is just IE8 (and earlier) modes where it does not. — Andy Smith, Sep 26 '12 at 08:40
I didn't even notice the subtle differences. I'd say it's close enough that it's not entirely important. I'm so beyond the idea of trying to make everything pixel-perfect across every browser imaginable. :/ — MetalFrog, Sep 26 '12 at 13:02
@AndySmith sounds like more hacks will have to be inserted to get `@font-face` working in IE10 compatibility mode now... Have you checked the developer console (`f12`) to see what the issue is? If you are concerned with the possibility that users will use compat mode and not see the custom font, and your layout will be ballsed due to the size difference of the fonts, I have developed a jQuery plugin that detects when custom fonts have/haven't loaded and allows you to alter font-size on fail. If this is the issue I'll throw it up as an answer. — Patrick, Sep 27 '12 at 08:34
@Patrick My current line of enquiry is this bug report: http://code.google.com/p/googlefontdirectory/issues/detail?id=1 It seems that these fonts *should* be working in IE8 so I can actually solve this problem by fixing the Bitter font CSS, though I can't for the life of my figure out what is wrong with Bitter — Andy Smith, Sep 27 '12 at 09:02
@AndySmith can you test this page out and see if it works? http://pulse-dev.com/files/stackoverflow/bitter/bitter-regular-demo.html — Patrick, Sep 27 '12 at 09:21
@Patrick I can confirm that this does work with IE10 in IE8 Document mode. I see you used font suirrel, it would be nice to know what it is they do differently to make this work! — Andy Smith, Sep 27 '12 at 10:20
Could be the name properties within the file, the fact it's local, there's a plethora of things that go wrong with `@font-face` randomly. I'll make it an answer. — Patrick, Sep 27 '12 at 10:25
OK Thanks, If it helps I find that the following works: http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light whereas bitter doesn't — Andy Smith, Sep 27 '12 at 10:25

Bradley A. Tetreault · Answer 1 · 2012-10-05T17:06:01.557

Updated.

Due to the nature of IE this seems to be a bit of a complex issue. In order to cover what is likely to be issues that come up differently depending on your particular situation here are the options that seem to have come up out of the research of the participants here.

Note: Be sure to clear any cache you may have of the pages so as to ensure they are loaded/served correctly.

Option 1:

Change your compatibility meta tag to <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />.

By changing from IE=8 to EmulateIE8 you cause the compatibility mode to respect the DOCTYPE which in turn causes IE to correctly load the font preferences from the CSS file.

Option 2:

Check that the file format your are using is served up in a format that IE can use and understand.

@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400;
  src: url(https://themes.googleusercontent.com/static/fonts/bitter/v4/XexqN1a_o27MhVVdJFKAcA.eot);
  src: local('Bitter-Regular'), url(https://themes.googleusercontent.com/static/fonts/bitter/v4/XexqN1a_o27MhVVdJFKAcA.eot) format('embedded-opentype'), url(https://themes.googleusercontent.com/static/fonts/bitter/v4/SHIcXhdd5RknatSgOzyEkA.woff) format('woff');
}

The important item to note when looking over this is the file format of the font. Now as far as IE font support goes it is a bit like this:

IE8 support for only the .eot format.
IE9/10 support for .woff AND .eot formats.

Option 3:

If you are reaching this option here then you are likely dealing with IE's sometimes poor adoption and implementation of web standards Likely what is happening is that IE9 is displaying the page in IE8 mode but also adding in it's own support for the .woff format. On the flip side IE10 is correctly displaying the page in IE8 mode using the file formats that it actually supported. My conclusion is therefore that IE10 is actually correctly displaying the page while IE9 tries to cover up lousy standards support.

One other thought here since you also mentioned in the comments below that it seems to working now, is that possibly Google was mistakenly serving the wrong format since the browser was IE10 but was displaying content in IE8 mode. If that is the case then the "correct" display of IE8 would mean that the .woff file that is acceptable to IE10 is NOT for IE8.

Side Note:

It is this kind of thing that is one of the largest causes of trouble for all web developers. The IE competition points out very poor support and improper implementation but are still at a disadvantage since IE comes preinstalled on a very large percentage of the PCs on the market since most run that particular operating system. This is one very strong argument for the acceptance, implementation, and use of standards and best practices.

I did some further research and uncovered what I believe is the root of the problem. — Bradley A. Tetreault, Oct 04 '12 at 19:36
Do you have a reference for IE8 only supporting .eof? I'm fairly sure I've had this font working in IE8 (though I don't have a copy to hand right now so I could be mis-remembering): http://www.google.com/webfonts#UsePlace:use/Collection:Josefin+Sans and this is only woff — Andy Smith, Oct 04 '12 at 21:27
Sorry for my typo's but the format is .eot. I edited the post to correct to the proper extention. As for the comparison charts, here are two sources: 1. http://webfonts.info/browser-support-overview-oct-2012 2. http://caniuse.com/fontface — Bradley A. Tetreault, Oct 04 '12 at 21:37
@BradleyA.Tetreault Google delivers the font file type necessary depending on the browser / device it's accessed from, it's not only `.woff`. It would be easy to check which font file type IE10 compat 8 was loading if you look in the network feed. — Patrick, Oct 05 '12 at 02:24
@BradleyA.Tetreault Aha! So on IE8 the url: http://fonts.googleapis.com/css?family=Josefin+Sans will serve up an .eot (as well as a .woff) file. So I believe you are correct. This is actually in a issue in the Bitter font, and the reason it doesn't work in IE10 is because IE10 appears to 'fix' an issue in IE9s emulation of IE8 document mode :). If you would care to edit your answer I will happily accept (I think the bit before the 'update' is inaccurate). — Andy Smith, Oct 05 '12 at 08:55
@BradleyA.Tetreault Hmm, I am mistaken, I am now finding that the bitter font will work on IE8 also? It is also serving up .eot files. I'm a bit confused right now — Andy Smith, Oct 05 '12 at 08:56
Updated the answer to reflect the details of these comments. I also think that a large part of your problem is the simply that your are testing on a new version that at least "claims" to correctly reflect the older versions. Unfortunately due to the fact that IE seems to not be able to do this uniformly across versions I am unsure how far one can truly rely on this option. I know I personally can not afford, nor have the means, to run multiple VMs or pay for such services. So sadly we are simply stuck trying to do the best that we can with these services we are given. — Bradley A. Tetreault, Oct 05 '12 at 14:03
Thanks very much for your answers so far, I'm a little bit reluctant to accept because option1 doesn't fix it, option2 is technically true but google is being clever and serves up .eot's for ie8 so this isn't the cause (though I believe you may be correct in your guess that this my be a recent occurrence). option3 I agree with but this doesn't solve the issue :-). Though obviously this is quite a complicate multi-faceted that is possibly not suited to the Q&A format of SO :-). — Andy Smith, Oct 05 '12 at 15:11

score 5 · Accepted Answer · edited May 23 '17 at 12:19

If the font doesn't actually work in IE8 itself, then it sounds like IE10 has a better compatibility engine over IE9 - since it actually depicts correctly what IE8 renders.

Why does IE9 Compat 8 actually show a font though, and why doesn't the font work in IE8? I would chalk this up to a font file issue. @font-face seems to be pretty plagued with issues - font property settings seem to be one of them on occasion. See: Why does one of these font-face render in IE8, but the others don't?.

Upon downloading the font, putting it through Font Squirrels generator, and hosting the set of font files locally with my own @font-face code, you have reported that the font works in IE10 Compat 8. I can confirm it also works in IE9 in all Compat modes, as well as IE7/8.

Bitter font works in IE10 compat mode with Font Squirrel generated font files/code.

Seeing as you have stated other Google fonts work in both IE9/10 Compat mode 8, I think it really seals the deal that the issue lies within the font file itself - and the issue that IE seems to have on a random occasions with its properties. The Font Squirrel generator seems to fix most peoples problems when it comes to @font-face issues - but as you can see in Why does one of these font-face render in IE8, but the others don't?, that's not always the case.

As this is not a compatibility only issue - it doesn't work in IE8 at all - it looks like your only option will be to host the fonts locally.

If you want greater control over your fonts and the ability to manipulate the elements CSS while fonts load or fail see: How to know if a font (@font-face) has already been loaded?

score 0 · Answer 3 · answered Jan 28 '14 at 20:25

I have verified that on IE8 (as opposed to another IE version running in IE8 Document mode) the above HTML does not work (i.e. displays as it does in my IE10 on Windows 8 example) so it would appear that IE10 has an altered version of IE8 document mode that is more accurate.

score 0 · Answer 4 · answered Feb 05 '14 at 18:54

If your server is apache, you can replace this directive in the by 2 lines on the .htaccess file at the root of your website:

BrowserMatch MSIE best-standards-support
Header set X-UA-Compatible IE=8 env=best-standards-support

With this I have no more problems with Google fonts under IE10 or IE11 even emulating IE8.

Why is IE10's "IE8 Standards" mode different from IE9's?

4 Answers4