fonts not rendering in ie 10 or 11

Question

My site: http://arethebaronsplaying.com/

isn't rendering fonts correctly in IE 10 or IE 11. Here's my css:

@font-face {
font-family: 'Mono Social Icons Font';
src: asset_url('fonts/MonoSocialIconsFont-1.10.eot');
src: asset_url('fonts/MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
     asset_url('fonts/MonoSocialIconsFont-1.10.woff') format('woff'),
     asset_url('fonts/MonoSocialIconsFont-1.10.ttf') format('truetype'),
     asset_url('fonts/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
src: asset_url('fonts/MonoSocialIconsFont-1.10.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
  font-family: 'hamilton18';
  src: asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.eot');
  src: asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.eot?#iefix') format('embedded-opentype'),
   asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.woff') format('woff'),
   asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.ttf') format('truetype'),
   asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.svg#MonoSocialIconsFont') format('svg');
  src: asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Everything looks great in chrome/safari/firefox. Any ideas?

I would recommend just using a tool such as http://www.fontsquirrel.com/tools/webfont-generator. — evan.stoddard, Mar 27 '14 at 02:41
Check the console in IE and make sure everything is loaded correctly and no 404s. — evan.stoddard, Mar 27 '14 at 02:44
Any other theories, I already have the `eot?#iefix` in the font settings? — reknirt, Mar 27 '14 at 02:51
I don't have a PC so not sure how much I can help. Just make sure the font is valid and that IE can see the font. So view the source and make sure the font is actually there — evan.stoddard, Mar 27 '14 at 02:52
Are your font the first thing in the css file? No idea if that will help but load those first as they are the largest assets — evan.stoddard, Mar 27 '14 at 02:54
http://arethebaronsplaying.com/assets/fonts/MonoSocialIconsFont-1.10.eot gives me 404 — evan.stoddard, Mar 27 '14 at 02:55
I looked at this and it talked about checking permissions. http://stackoverflow.com/questions/17157516/font-face-works-locally-on-ie10-but-not-on-the-server?rq=1 I would check your permissions. — evan.stoddard, Mar 27 '14 at 02:57
interesting. I'm calling it like so `src: asset_url('fonts/hamilton_wood_type_foundry_-_hwtunitgothic-718-webfont.eot');` which rails syntax. Perhaps I have to call the ie font differently? — reknirt, Mar 27 '14 at 02:57
Not quite sure. Like I said, check IE for errors and that should give you a better idea. — evan.stoddard, Mar 27 '14 at 03:00
The similar question asked over here, please check: http://stackoverflow.com/questions/5065362/ie9-blocks-download-of-cross-origin-web-font — ravk, Mar 27 '14 at 05:20

A.Pavlyuk · Answer 1 · 2015-04-24T10:07:29.230

3

To solve this problem just add -ms-font-feature-settings:"liga" 1; to your css

for example:

.social .icon {
  -ms-font-feature-settings:"liga" 1;
  font-family:'Mono Social Icons Font';
  -webkit-text-rendering:optimizeLegibility;
  -moz-text-rendering:optimizeLegibility;
  -ms-text-rendering:optimizeLegibility;
  -o-text-rendering:optimizeLegibility;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-font-smoothing:antialiased;
  -ms-font-smoothing:antialiased;
  -o-font-smoothing:antialiased;
  font-smoothing:antialiased;
}

edited Apr 24 '15 at 10:07

answered Apr 24 '15 at 10:02

A.Pavlyuk

31
4

This worked for me. In my case, the font was loading but the actual icon was not being rendered. – user3137901 Feb 17 '16 at 06:34

score 1 · Accepted Answer · answered Mar 27 '14 at 05:37

1

Looking at the console in IE of your website, there appear following error -

"CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable."

On web, these are the two links which talk about this issue and common solution: https://github.com/tapquo/lungo.icon/issues/1 and http://codecanyon.net/forums/thread/css3114-fontface-failed-opentype-embedding-permission-check-permission-must-be-installable/78963

common solution link: http://carnage-melon.tom7.org/embed/

However the talked tool seems available only for older version of windows and not for latest version of windows.

answered Mar 27 '14 at 05:37

ravk

394
3
11

This looks promising, thank you very much. Anyway to fix this issue on a mac? – reknirt Mar 27 '14 at 14:16
Your welcome :), please upvote or accept as per your consideration if this answer helped in your issue. – ravk Mar 27 '14 at 14:38
1

Last question...do you know how I could go about fixing this on a mac? – reknirt Mar 27 '14 at 15:23

fonts not rendering in ie 10 or 11

2 Answers2