Internet explorer, Safari and Chrome problems with displaying @font-face rules.
        Posted  
        
            by Antonio
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by Antonio
        
        
        
        Published on 2010-05-19T22:46:04Z
        Indexed on 
            2010/05/19
            22:50 UTC
        
        
        Read the original article
        Hit count: 313
        
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">
text text text text text text text text
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!!
© Stack Overflow or respective owner