5

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!

Holbrook Travel
  • 51
  • 1
  • 1
  • 2
  • 4
    If you hit F12, reload the page, and look at the F12 Tools' Console tab, do you see any error messages? – EricLaw Jan 10 '14 at 21:29
  • 1
    Yes, it says @font-face failed OpenType embedding permission check. Permission must be Installable. File: avenirnextltpro-mediumcn.ttf. Should I remove the .ttf for IE? – Holbrook Travel Jan 10 '14 at 21:33
  • 5
    IE will not use a TTF file unless the "Installable" flag is set in that font (which it usually isn't unless the font is specifically licensed to permit such use). However, the WOFF file should work just fine-- are you seeing that download in the Network tools? – EricLaw Jan 10 '14 at 21:40
  • I see the .woff file but it has a 404 result. – Holbrook Travel Jan 10 '14 at 21:48
  • 3
    So, your first step should be to upload the WOFF file to the correct place. If the file is where it's supposed to be, you need to configure your webserver so that it serves that MIME type (some servers like IIS may not serve files of MIME types that aren't known to the server). – EricLaw Jan 11 '14 at 02:09
  • Go here for setting the proper mime-types for your server: http://stackoverflow.com/questions/2871655/proper-mime-type-for-fonts/10864297#10864297 – Mike Kormendy Apr 05 '14 at 16:59

2 Answers2

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

Eric Soyke
  • 1,073
  • 1
  • 15
  • 30
0

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 */
md27
  • 95
  • 1
  • 3