4

I'm having trouble with with web fonts in Internet Explorer 11. The font(s) work for some users with IE11 but not others even though it's the same browser. Modernizr.fontface still returns true for the users experiencing the problem so I can rule that out.

Below is the CSS...

@font-face {
    font-family: 'Balthazar';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/Balthazar/Balthazar.eot'); /* IE9 Compat Modes */
    src: local('Balthazar Regular'), 
         local('Balthazar-Regular'),
         url('/assets/fonts/Balthazar/Balthazar.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/assets/fonts/Balthazar/Balthazar.woff2') format('woff2'), /* Modern Browsers */
         url('/assets/fonts/Balthazar/Balthazar.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/assets/fonts/Balthazar/Balthazar.svg#Balthazar-Regular') format('svg'); /* Legacy iOS */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

<remove fileExtension=".woff"/>
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
<remove fileExtension=".woff2"/>
<mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />
<remove fileExtension=".ttf"/>
<mimeMap fileExtension=".ttf" mimeType="application/x-font-ttf" />
<remove fileExtension=".eot"/>
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<remove fileExtension=".svg"/>
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<remove fileExtension=".svgz"/>
<mimeMap fileExtension=".svgz" mimeType="image/svg+xml" />

IE tries to render the ttf file and so I thought it might be a mime type issue. It was, partially: I updated the mime type to application/x-font-ttf which fixed it for at least one user but two others are still experiencing the issue. Then I tried adding a WOFF after the WOFF2 and that still didn't work.

I'm at a loss. Please help.

Eric M
  • 61
  • 1
  • 5
  • 1
    Solved! It was a combination of adding .woff back in with a mime type of application/font-woff. Apparently application/x-font-woff is not as reliable as some articles make it out to be. Definitely not a DRM. Definitely not a typo. – Eric M Oct 16 '15 at 20:34

1 Answers1

3

Try these...

1. Check for DRM errors

IE 11 "bulletproof" font-face and fall back fonts not working If you hit F12, reload the page, and look at the F12 Tools' Console tab, do you see any error messages, such as "@font-face failed OpenType embedding permission check."? If you do, it is likely an issue with DRM on the font, which IE 11 respects and others do not.

2. Check MIME type setup (again)

Make sure the mime-types match as answered here (the ones you listed do not): "Proper MIME type for fonts"

3. Assure the CSS name matches the name in the font file

If that doesn't work, does the name declared as the font's name in CSS match the name stored in the file itself? http://www.experts-exchange.com/Web_Development/Blogs/WordPress/Q_28367854.html

4. Use the Google Webfont loader

If fixing the mime-types do not fix your issue, try using the google fonts webfont loader as described in this answer: https://stackoverflow.com/a/21289510/356550

Community
  • 1
  • 1
smdrager
  • 7,327
  • 6
  • 39
  • 49
  • This answer would probably be more appropriate as a comment or comments on the question, as it is more a list of suggestions that it is an attempt at a definitive answer. – Brian Warshaw Oct 16 '15 at 19:40
  • 2
    Re-wrote part of it to be less passive-voiced. It is several possible answers. – smdrager Oct 16 '15 at 19:46
  • 1
    IE 11 "bulletproof" font-face is actually less comprehensive than http://css-tricks.com/snippets/css/using-font-face/ – Eric M Oct 16 '15 at 19:48
  • The key part from the first solution is that there may be DRM on the file that IE 11 respects where other browsers do not. – smdrager Oct 16 '15 at 19:58