Jin Yong
Jin Yong

Reputation: 43768

@font-face not working in IE9

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;
}

Upvotes: 1

Views: 2237

Answers (1)

cereallarceny
cereallarceny

Reputation: 4983

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');
}

Upvotes: 5

Related Questions