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;
}

Perhaps you would like to check this out - http://www.steveworkman.com/tag/web-fonts/ — Murat Ünal, Nov 26 '12 at 08:33

score 7 · Accepted Answer · answered Nov 26 '12 at 08:52

7

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

answered Nov 26 '12 at 08:52

adam-asdf

646
7
16

Thanks, went to font-squirrel and used the generated HTML which made it (finally Work in IE 10). – Jesper R. Hansen Nov 26 '12 at 20:47
Problem with font face generator is that is hated me for using Adobe fonts. :( – Alex Stewart Apr 03 '13 at 07:17
Another problem with face generator is that my fonts came out slightly different after they processed them. The line height and vertical base line all seemed to have changed. It did work in IE 10, but it was not usable since it messed up all of my layouts. – M Katz Jul 20 '13 at 05:43
@M Katz I just revisited this after reading up on accessibility techniques http://www.w3.org/WAI/WCAG20/quickref/ Aside from the move towards many devices, one of the requirements is that text be able to be magnified by 200% without breaking things. I suspect that if line height and vertical baseline shifts messed up your layouts you might want to reconsider the 'strictness' of your layouts (I come from a print design background, used to feel the same). – adam-asdf Aug 09 '13 at 06:01
Font face generator worked for me. Added all the extra gubbins that IE required to make it work and kept it working happily in other browsers. Top tip! – Rob Hardy Nov 11 '13 at 10:12

score 7 · Answer 2 · answered Dec 18 '12 at 20:12

7

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 ...

answered Dec 18 '12 at 20:12

domaleo

71
1

1

Maybe make this a comment instead? – cereallarceny Dec 18 '12 at 20:30
This was the solution to a general problem I was having with seeing downloaded web icons. – Grant H. Aug 05 '13 at 16:27
Yes, I ran into this problem once before. I could be the case. – Bran van der Meer Feb 24 '14 at 18:36

score 2 · Answer 3 · answered Mar 12 '13 at 16:15

2

I had the font-squirrel @font-face working in everything but IE, myproblem though was that the .woff was the only thing not included in IIS mime-types on my server. That might help someone who's also ended up on this question.

answered Mar 12 '13 at 16:15

Iain M Norman

2,075
15
30

score 1 · Answer 4 · answered Jun 04 '15 at 17:35

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.

score 0 · Answer 5 · edited May 23 '17 at 12:15

0

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...

edited May 23 '17 at 12:15

Community

1
1

answered Nov 26 '12 at 08:40

A1Gard

4,070
4
31
55

Thanks Mahdi but that doesn't explain why the custom fonts are not displayed in IE 10 on any computer I have tried on? – Jesper R. Hansen Nov 26 '12 at 09:02
i test with IE tetser its worked. can you test with IE tester – A1Gard Nov 26 '12 at 14:19
-Mahdi haven't tried but as you can see in my edited question and the answer from adam, I found the right markup for making it Work in IE 10. Thanks a lot for your help will look into the IE Tester :-) – Jesper R. Hansen Nov 26 '12 at 20:52

score 0 · Answer 6 · answered Apr 03 '13 at 07:16

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

score 0 · Answer 7 · answered Aug 27 '13 at 07:40

0

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.

answered Aug 27 '13 at 07:40

Marcoz

1

Helvetica Neue has well-documented cross platform problems due to naming syntax. I don't recall all the details but it's something like Windows using a "HelveticaNeue" naming convention and Mac using "Helvetica Neue". I know this mainly applies to using locally installed fonts but since your problem is with Helvetica Neue it is worth reviewing the existing research...you might also have luck using a CDN that serves the correct content to each visitor (like Google Web Fonts, even though they don't have H.N.) – adam-asdf Dec 19 '13 at 02:51

font-face not working in IE 10

7 Answers7

Linked