@font-face not working with IE running on XP

Question

Problem sample: http://www.osdev.org/squirrel/card.html

Problem sample2: http://www.osdev.org/squirrel/dejavusans-demo.html

I'm looking to use symbols from the Unicode 6 U+1F0A0–1F0FF range (Playind Card Block) http://unicode.org/charts/PDF/U1F0A0.pdf but even ascii ranged characters aren't rendered in the font and whatever font is being used on IE/XP doesn't have symbols for the playing card block.

Version 2.33 of DejaVu Sans added playing cards, the ttf font is available at http://dejavu-fonts.org/wiki/Main_Page.

I've tried every EOT generator I can find. The second sample is the demo page generated by http://www.fontsquirrel.com.
I've tried making IE only pages just in case the CSS font url wasn't being picked up correctly.
I've used FontForge on the original ttf to make all the family, unique names, etc match before running the font through eot generators.

If I install the ttf locally (in the Windows XP fonts folder) I can use css font-family without font-face to display the font in IE but I can't ask everyone to do that.

IE8 on Windows 7 seems to work but IE6, IE7, and IE8 on Windows XP all fail. It is like font-face just doesn't do anything on XP.

Any suggestions? I asked on the http://www.fontsquirrel.com forums first but haven't received any responses.

Edit: To clarify, IE on XP renders the playing cards as an empty square, the same "blank" symbol that is used when your system can't display any character.

score 0 · Answer 1 · edited May 23 '17 at 11:49

0

Take a look of your server settings. I'm using Chrome on a Mac, so I cannot actually "see" your problem.

But I looked the content-type in your font file's Response-Headers. It's Content-Type: text/plain; charset=UTF-8. I think this is your problem.

You should change the settings of your server to make the response have the correct Content-Type. Or IE may think that the file is not a valid font file.

Try Google "font file content type" for more information.

And I think this will help you too. https://stackoverflow.com/a/10864297/1061004

edited May 23 '17 at 11:49

Community

1
1

answered Mar 06 '13 at 02:55

YuAo

1,427
1
10
17

Thanks but the eot format was already returning application/vnd.ms-fontobject as the Content-Type. I did go ahead and add the types for woff and ttf but that did not make any difference. – Chase Mar 06 '13 at 04:45

score 0 · Answer 2 · answered Oct 03 '13 at 13:26

Include two fonts, first is for IE and rest is for all other browsers.

@font-face {
  font-family: "SocialFoundicons";
  src: url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "SocialFoundicons";
  src: url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot"),
   url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot?#iefix") format("embedded-opentype"),
   url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.woff") format("woff"), 
   url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.ttf") format("truetype"), 
   url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.svg#SocialFoundicons") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face not working with IE running on XP

2 Answers2