font-face not working in IE 10

Question

I have absolutely no succes in getting IE 10 to display custom fonts. Has anyone else a solution for this? I can see a few shout-outs on the net that others have trouble with their fonts in IE 10, but no solutions or confirmed bugs to be found.

Anyone with the same experience or solution?

This is what I have right now, and it works well in IE before 10, Chrome and Safari:

@font-face {
    font-family: "LCD";
    src: url('http://www.somedomain.xxx/Public/Fonts/Quartz_Regular.ttf');
}

<!--[if IE]>
<style type="text/css">
@font-face {
    font-family: "LCD";
    src: url('http://www.somedomain.xxx/Public/Fonts/Quartz_Regular.eot');
}
</style>
<![endif]-->

I have tried to substitute with font files in other formats woff, ott etc. but no luck at all with that.

The answer which hinted at font-squirrel made it Work. Now the working markup (for IE 10) is:

@font-face {
    font-family: "LCD";
    src: url('/Public/Fonts/quartz_regular-webfont.eot');
    src: url('/Public/Fonts/quartz_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Public/Fonts/quartz_regular-webfont.woff') format('woff'),
         url('/Public/Fonts/quartz_regular-webfont.ttf') format('truetype'),
         url('/Public/Fonts/quartz_regular-webfont.svg#quartzregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer 1

Must add that the fontface generator doesn't fix this for all fonts. When using the font Helvetica Neue Medium Condensed (HelveticaNeueLTW1G-MdCn) for instance. I'm using multiple fonts on a website. They all work with the fontface generator, except that Helvetica-font.

Answer 2

I just came across a client reporting he was unable to see the webfont on his website. Ends up that the "High" security level (in IE options) blocks web fonts by default. You can create a custom security level that is basically "High" but still enables web-fonts. Or just turn it down to medium-high.

Answer 3

I assume this is in an HTML file, due to the HTML comments and style elements...if not, look into that.

Beyond that, just use the @font-face generator

Answer 4

I used this here: http://www.impressivewebs.com/ie10-css-hacks/

More specifically:

@media screen and (min-width:0\0) {  
    /* IE9 and IE10 rule sets go here */  
}

By using this we can just pop in a nice alternative font and still have sexyness in the other browsers with open fonts.

Try the fonts here: http://cssfontstack.com

Answer 5

Is it possible that IE10 does not render web fonts if Security Mode is activated? After deactivating (internet options - security) my websites were displayed correctly ...

Answer 6

The font-face not updated on IE 10 -> reference , you can use it same IE-9

you can learn how use font-face here

i think you include all type of your font...