My custom font doesn't want to work in Internet Explorer

I'm trying to use the Green Pillow and Cotidiana fonts on a site I'm working on. I've loaded the .eot file using @font-face but it's still not working...

Really not sure what I've done wrong here:

@font-face {  
 font-family: "link_font";  
 src: url( "Greenpiloww.eot" ); /* IE */  
 src: local("GreenPillow"), url( "GREENPIL.otf" ) format("truetype"); /* non-IE */  
}  


@font-face {  
font-family: "twitter_font";  
 src: url( "Cotidiana.eot" ); /* IE */  
src: local("Cotidiana"), url( "Cotidiana.ttf" ) format("truetype"); /* non-IE */  
}  

Answers


You might try the following syntax, known as the bulletproof font-face syntax:

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

Apparently the querystring after the .eot font helps IE not choke. If you don't have .svg or .woff versions of your fonts, just remove those lines.


Need Your Help

Two Android applications with the same user ID

android

From http://developer.android.com/guide/topics/fundamentals.html: