Internet Explorer 11 and supported web fonts

Question

I'm using a TTF and OTF web font to catch all major browsers(FireFox, Chrome and IE11) on most devices. It all looks fine, before relocation to the production server and then IE doesn't want to show my icons.

I guess, the brains in Redmond have some kind of feature to stop this working over the Internet, so it works from localhost only.

What's the deal here? What kind of font type do I need to use for IE?

Solution 1

This is the standard way of loading with @font-face, hacky fixes and all -

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

hey please check the Compatibility tables for support of EOT, check these links -

Link 1

Link 2

Solution 2

Be aware of one thing:
Fonts won't work in IE if the font-family entry in css is named differently than the font name! This bug took me all day to figure out and can be very frustrating if you are not aware of it!

For IE 6-11, use EOT fonts, but be aware it is not supported by any other browser.

For IE >=9 & all other browsers, use woff fonts, as it has the widest support and the best compression, since it was designed specifically for the web.

as such:

@font-face {
    font-family: 'FontName';
    src: url('FontName.eot');  /* IE 9 - 11 */
    src: url('FontName.eot?#iefix') format('embedded-opentype'), /* IE Fix for IE 6-8*/
         url('FontName.woff') format('woff'); /* IE 9-11 & All Modern Browsers */
}

Comments

[Luke Puplett]

Nice! Haven't used it yet, was fiddling with WOFFs and republishing, managed to get it going in all but Windows Phone 8 IE. What does webfont.eot?#iefix do, btw?

[Rohit Suthar]

It's because of the way IE8 and below interpret font declarations. The normal url('webfont.eot') would lead to 404 Server errors in these versions of IE, adding the ?#iefix fixes the server issues.

[SuperUberDuper]

do we even still need this if yo just want to support ie11 and evergreen?

[AlexKh]

Thank You sir, for your advanced answer!

[funky-nd]

What is .woff2 for? I mean which environment?

[Rohit Suthar]

woff2 is a font format that provides, on average, a 30% reduction in file size, thus helping Web fonts load more quickly incompatible browsers. It was designed to provide lightweight, easy-to-implement compression of font data, suitable for use with CSS.