IE8 font-face not showing when also using embedded fonts

I had a IE8 specific bug that cost me a frustrating couple of hours. Whilst it makes zero-interest reading for most people, documenting the solution may at least help my future self when I fail to remember what to do.

I had an icon-font in a @font-face rule that was showing everywhere other than IE8.

Consider this:

@font-face {
    font-family: 'sausages';
src: url('/globalCSS/fonts/sausages.eot?79729309');
src: url('/globalCSS/fonts/sausages.eot?79729309#iefix') format('embedded-opentype'),
url("data:application/octet-stream;base64,AAEAAAAOAIAAAwBgT1MvMj4oSpAAAA...A=") format("truetype");
    font-weight: normal;
    font-style: normal;
}

This is for widely used icons on a project. I’m embedding a TTF font as it’ll work everywhere apart from IE (Woff would be a good choice too but you won’t get Android <4 that way). This rule is going to be fine everywhere, including IE9.

It won’t however, work well in IE8. You’ll get the tiny little square showing and no icon.

The problem is caused by having a reference to an embedded TTF/Woff file in the same @font-face declaration as the links to IE specific, EOT format fonts.

What you’ll need to do, should you still be in the unfortunate position of needing to support IE8, is move the references to the EOT font to a separate @font-face declaration. Like this:

@font-face {
    font-family: 'bet365UI';
        src: url('/HeaderModule/assets/fonts/bet365UI.eot?79729309');
        src: url('/HeaderModule/assets/fonts/bet365UI.eot?79729309#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

/*Using a TTF icon as it has very broad support meaning we don't need to have data uri in multiple formats*/
@font-face {
    /*font-family: "bet365UI";*/
    font-family: 'bet365UI';
        src: url("data:application/octet-stream;base64,AAEAAAAOAIA...") format("truetype");
}

For reasons known only to Internet Explorer 8, this will then work fine and you can go about your business.

An additional rendering bug with IE8 and icon fonts

An additional IE8 specific bug relating to icon fonts I discovered was that sometimes, if you have an icon font assigned to something that is invisible by default (e.g. set to display:none) then if you toggle a class to show it, it doesn’t always appear. You can work around this issue by setting an element such as body to have a pseudo element (::before/::after) with the icon-font assigned but positioned off screen (or coloured the same as the background). It’s a hack but this seems to make IE8 render the font ready for when the ones you do want to display are needed.