Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

font-face not working in IE 10

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;
}
like image 343
Jesper R. Hansen Avatar asked Nov 26 '12 08:11

Jesper R. Hansen


1 Answers

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

like image 104
adam-asdf Avatar answered Oct 24 '22 16:10

adam-asdf