15

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?

Alex Kulinkovich
  • 4,408
  • 15
  • 46
  • 50
Luke Puplett
  • 42,091
  • 47
  • 181
  • 266
  • 1
    Please use `EOT` fonts for internet explorer... – Rohit Suthar May 30 '14 at 12:41
  • 3
    Dude, if you think this is right, post a proper answer. I don't get why so many people post answers as comments. – Luke Puplett May 30 '14 at 12:44
  • As an aside, in the past I've encountered permissions issues with TTF files, where certain bits have to be flipped on in the TTF file itself to make it usable in production. Based on your description of the issue, I believe that's what you encountered. See a discussion here: https://stackoverflow.com/questions/15744026/font-face-not-displaying-correctly-in-ie – Ringo Nov 12 '20 at 19:07

2 Answers2

22

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

Rohit Suthar
  • 3,528
  • 1
  • 42
  • 48
  • 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? – Luke Puplett May 30 '14 at 13:05
  • 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. – Rohit Suthar May 30 '14 at 13:42
  • 2
    do we even still need this if yo just want to support ie11 and evergreen? – SuperUberDuper Apr 04 '16 at 19:10
  • Thank You sir, for your advanced answer! – AlexKh Apr 04 '16 at 23:35
  • What is .woff2 for? I mean which environment? – funky-nd Nov 04 '20 at 16:47
  • `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. – Rohit Suthar Nov 08 '20 at 09:01
8

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 */
}
beliha
  • 320
  • 3
  • 6