Internet explorer, Safari and Chrome problems with displaying @font-face rules.

Question

Hy guys, I've a problem with IExplorer, Chrome, Safari etc.. Only Firefox works perfectly with all of this @font-face rules:

In Css:

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

@font-face {
 font-family: HAND;
 src: url('http://www.mydomain.org/css/HAND.eot');
 src: url("HAND.ttf");
}

#side_text {
 position:relative;
    width:330px;
 height:800px;
 float:left;
 margin-left:25px;
 margin-top:30px; 
}

#side_text p {
 font-family: HAND;
 font-size: 18pt;
 text-align:left;
 color:#f3eee1;
 }

In .html

<div id="side_text">
 <p>
  text text text text text text text text
 </p>
</div>

I'ven't any problem with Calibri font, maybe because it's installed on os. The HAND font it's the problem. Moreover, IExplorer don't take any customs write in css (color, font-size, align..) That's all, hope to find a solution.. or I'll gone crazy :(

Ps: I converted the .ttf font to eot with two different online converter - Sorry for spam :/ (http://ttf2eot.sebastiankippe.com) www.kirsle.net/wizards/ttf2eot.cgi because I've problem to execute ttf2eot on google code Thanks a lot guys!!

Answer 1

I've had excellent results with the FontSquirrel @font-face generator. You give it your ttf and it returns everything you need, including the css and eot. Works with all major browsers.