Why does one of these font-face render in IE8, but the others don't?

Question

Why does this fontface render in IE8:

@font-face {
  font-family: 'Aller';
  src: url('aller_rg-webfont.eot');
  src: url('aller_rg-webfont.eot?#iefix') format('embedded-opentype'),
       url('aller_rg-webfont.woff') format('woff'),
       url('aller_rg-webfont.ttf') format('truetype'),
       url('aller_rg-webfont.svg#AllerRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

And this does not:

@font-face {
  font-family: 'Champagne';
  src: url('champreg-webfont.eot');
  src: url('champreg-webfont.eot?#iefix') format('embedded-opentype'),
       url('champreg-webfont.woff') format('woff'),
       url('champreg-webfont.ttf') format('truetype'),
       url('champreg-webfont.svg#Champagne&LimousinesRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

I really can't figure it out. All other browsers work fine, obviously.

score 32 · Accepted Answer · edited Oct 28 '13 at 07:09

32

Try creating a new .eot file with one of the others using an online woff/ttf/svg to eot convertor.

http://www.font2web.com/
http://www.fontsquirrel.com/fontface/generator <- might have problems because they black list font names.

If this new file doesn't work, then it might be a problem with the font itself. Sometimes IE6-8 has a fit if the Fontname and Family Name are not the same within the actual font file. To fix it:

You'll need to download FontForge
Open up the font
From the menu, choose Element > Font Info
Ensure the Fontname, Family Name and Name for Humans are all the same
Save the font as a TTF or OTF and use an online convertor to spit out an EOT file.

Every issue I've had with font-face - if the CSS was correct - worked with one of the above two solutions, so good luck :-) Maybe even try saving the font without any changes in FontForge and converting that online before you fiddle with the name properties.

edited Oct 28 '13 at 07:09

Simon East

55,742
17
139
133

answered Sep 17 '12 at 12:43

Patrick

3,490
1
37
64

1

Wow...renaming the font info via FontForge actually worked! Learnt something today, thank you Patrick – djwd Sep 17 '12 at 17:00
1

This not only solved my IE9 problem (it was working, but logging an error in the console), but it also got it working for IE8. A hug thanks! – Christof Jul 31 '13 at 08:44
Good God! Thank you so freaking much! – Christina Nov 03 '13 at 18:43
1

I also ran into this very same problem, I compiled the fixed EOT file and shared it here: http://gist.github.com/vjt/7436066. I hope this saves someone the very bad time I spent fighting with FontForge on Windows. – vjt Nov 12 '13 at 18:26
This solved my problem, but some eot files fixed by next case: Edit .otf file in FontForge: set all the same in **PS Names** and **TTF Names** `Element - Font info... - PS Names : Fontname, Family Name, Name For Humans Element - Font info... - TTF Names : Family.` Generate ttf file with modifications and convert ttf to eot by [ttf2eot converter](https://github.com/metaflop/ttf2eot/) – ellexdev Dec 15 '15 at 21:19

score 0 · Answer 2 · answered Oct 25 '13 at 12:48

Added this to htaccess. "BrowserMatch MSIE best-standards-support Header set X-UA-Compatible IE=8 env=best-standards-support"
trying to reconvert eot font
doc compactibility mode chnage
tried usleep function
setInterval js
add google html5 script
call css in body part for ie8
add data-icon class
ad pseudo elements js
add png & svg filters in css
check font type Permission in server

but finally works when added

.sass and .less css

files happy coding... by sivakumar

score 0 · Answer 3 · answered Jan 24 '14 at 21:53

Under IIS (MVC environment) I had to add the following rule to my Web.config:

   <system.web>
    <httpHandlers>
      <add verb="GET" path="*.eot" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.svg" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.ttf" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.woff" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.otf" type="System.Web.StaticFileHandler" />
    </httpHandlers>
  </system.web>

Why does one of these font-face render in IE8, but the others don't?

3 Answers3

Linked