Home/ Questions/Q 8598143
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T01:05:06+00:00

I have the following HTML: <!DOCTYPE HTML> <html> <head> <meta http-equiv=X-UA-Compatible content=IE=8 /> <link

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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?

    • 0