IE 11 "bulletproof" font-face and fall back fonts not working

Question

I am having problems with my fonts in IE11. I've used the following font-face which works fine in Chrome, Safari and Firefox but not in IE.

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

So I added some fallbacks

font-family: 'Avenir', 'Arial Narrow', 'sans-serif';

which actually work for IE 11 on my machine but not on a colleague's IE 11. So now I am really perplexed.

I'm definitely not an old pro at this stuff so any suggestions are greatly appreciated!

Answer 1

This is a great resource for configuring fonts. Tell it the type of font you want, what styles, download the zip, and copy the config:

https://google-webfonts-helper.herokuapp.com/fonts