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 {
fon         


        

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

Answer 2

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 */