IE 11 “bulletproof” font-face and fall back fonts

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

I am not sure if IE 11 now supports other font formats like .woff but my best guess is that you should add another .eot font for IE9+ as you only added .eot font for IE versions 6-8. See below.

your code:

src: url('fonts/avenirnextltpro-mediumcn.eot?#iefix') format('embedded-opentype'); /** IE6-IE8 **/

try and update it like this:

src: url('fonts/avenirnextltpro-mediumcn.eot'); /** IE9 Compat Modes **/
src: url('fonts/avenirnextltpro-mediumcn.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

Answer 2

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