2

I'm having some issues with the font-face property. This code works in every browser, even IE8 and lower, but I cannot get it to fire off in IE9 or 10. I've scanned this board and google and have found a bunch of solutions, but nothing seems to wanna work for me. Here is my code:

@font-face {
font-family: din_light;
  src: url('din_light.ttf?') format('truetype'),
       url('din_light.eot');
}

Does anyone see anything wrong here..?

Jack Sniper
  • 389
  • 1
  • 8
  • 20
  • possible duplicate of [@font-face works in IE8 but not IE9](http://stackoverflow.com/questions/4607560/font-face-works-in-ie8-but-not-ie9) – JerryHuang.me Nov 16 '13 at 00:29

1 Answers1

2

Researching others with similar issues, it seems to be that IE 9 likes to utilize the WOFF version of the font, even if you specify the EOT in another source URL like you have (when using multiple sources at once). Try the following code and let me know how it goes:

@font-face {
    font-family: 'din_light';
    src: url('din_light.eot'); /* IE9 Compat Modes */
    src: url('din_light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('din_light.woff') format('woff'), /* Modern Browsers */
         url('din_light.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('din_light.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

If you don't have the other font types you can get them from webfont-generator (fontsquirrel)

Code above was found here: Fixing IE 9 @font-face problems

Deryck
  • 7,608
  • 2
  • 24
  • 43