1

I have the following code to style the font for my page, but somehow the @font-face working in mozilla but not in IE. Does anyone know what's going on here and how can I fix this?

@font-face {
  font-family: 'TrashHand';
  src: url('../fonts/TrashHand.ttf');
  }

@font-face {
  font-family: 'BebasNeue';
  src: url('../fonts/BebasNeue.otf');
  }  


.tab_g 
{
    background:url(../images/ss_tab_0.png) no-repeat;
    width:176px;
    height:42px;
    font: 25px 'TrashHand',Arial, Helvetica, sans-serif;
    font-weight:50;
    text-transform:uppercase;
    color:#ffffff;
    padding-top:10px;
    text-align:center;
    margin-bottom:-15px;
}
driangle
  • 11,601
  • 5
  • 47
  • 54
Jin Yong
  • 42,698
  • 72
  • 141
  • 187
  • 1
    You wanna take a look at this question: [@font-face works in IE8 but not IE9](http://stackoverflow.com/questions/4607560/font-face-works-in-ie8-but-not-ie9) – Ibu Sep 11 '12 at 00:09

1 Answers1

5

You should definitely check out something like Font Squirrel where you can upload your fonts and it will spit back the corresponding CSS. Guaranteed perfect in all browsers. Also, check out Paul Irish's bulletproof @font-face for more information on the topic.

It should look something like this:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}
cereallarceny
  • 4,913
  • 4
  • 39
  • 74
  • The point is that IE does not support TTF or OTF formats in `@font-face`, so you need to generate an EOT format font file for it and use a suitable `@font-face` rule that takes different browsers into account. And you need to check that the usage conditions of the font allow that. – Jukka K. Korpela Sep 11 '12 at 04:49
  • Absolutely, you can convert to EOT via the Font Squirrel link I included. I'm sure there are plenty other ways to convert fonts to EOT on the web, but this is the easiest way I've found. If this isn't allowed in the terms of the font then you may have to result to an image, flash, or just embedding a different font. – cereallarceny Sep 11 '12 at 06:05