Why does removing woff2 in @font-face solve IE11 problems

Question

I had troubles with a @font-face these days. My font was not displaying in IE11, but in all others.

Turned out that removing the "woff2" font solved my problems and the font displayed normally.

My question now is: Why could that be the solution? What is going on in IE11s mind, that removing a simple "woff2" tag could be the answer? I mean, normally I read about .htaccess files and other things which are really not easy to find out...

Does IE11 try to load the woff2 first?

Answer 1

IE 11 use woff instead of woff2. If you want maximum compatibility use this:

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

For reference: CSS Tricks - Using @font-face