Question

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

Answer 1

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