IE11 built-in font won't work - tried all the usual approaches

I have a set of built-in fonts that work fine in Firefox, Chrome, Safari - but, surprise, surprise, and not in IE (v11, but tried at 10, and that didn't work either).

I can download some in IE, but not others. Css example:

/* working */ @font-face { font-family: 'FoundersGroteskWeb-Semibold'; src: url(./fonts/FoundersGroteskWeb-Semibold.eot); src: url(./fonts/FoundersGroteskWeb-Semibold.eot?#iefix) format('embedded-opentype'), url(./fonts/FoundersGroteskWeb-Semibold.woff) format('woff'); font-style: normal; font-weight: normal; } /* not working */ @font-face { font-family: 'FoundersGroteskX-CondensedWeb-Bold'; src: url(./fonts/FoundersGroteskX-CondensedWeb-Bold.eot); src: url(./fonts/FoundersGroteskX-CondensedWeb-Bold.eot?#iefix) format('embedded-opentype'), url(./fonts/FoundersGroteskX-CondensedWeb-Bold.woff) format('woff'); font-style: normal; font-weight: normal; } 

Fonts are served, all are correctly named, etc. One of the remarks that I noticed was that all other browsers downloaded the woff file, while IE used the (first, not #iefix) eot file. So I tried to remove all links to eot files, forcing IE11 to use woff. Again, he downloaded the first tune, but did not use the second (all other browsers loaded without problems).

When I check the network tab in IE, I can see a 200 response for the first font, but for the second font there is nothing at all like it might choke on css analysis. However, given that the two declarations are identical except for the font name, I do not understand why this is possible.

Does anyone have any ideas what else I can try because I have run out of straw to grip?

+5
source share
3 answers

IE 9 (and I think 10 and 11 as well) has 31 restrictions on the identity of the font name. Try renaming the font name to "FoundersGroteskX-CndWeb-Bld"; which is 30 characters, just to be safe (because this 31 character limit includes quotation marks and a half-mark.

+8
source

as per your previous suggestion, I also tried to minimize font names, but this still doesn't work in the latest IE:

 </style> <style type="text/css"> @font-face { font-family:"Avenir"; src: url("./Fonts/Avenir.eot"); src: url("./Fonts/Avenir.eot?#iefix") format("embedded-opentype"), url("./Fonts/Avenir.woff") format("woff"); } </style> 

Do you think IE no longer accepts woff fonts?

0
source

Check the font download download, it should enable the font icon download.

Switch to:

IE> Internet Settings> Intranet> User Level> Download> Font Download

0
source

All Articles