Search code examples
csssvgfontsfont-faceeot

font-face runs in IE but not in firefox - formats of fonts


I downloaded a free font in two kings of regular and bold. and with these format: svg,eot,ttf, woff. These fonts are working well for IE. but they don't work in firefox. 1. I want to know which format is used for which web browser. 2. Please help me solve this probelm:

@font-face {
   font-family: "Nazanin";
   src: url("../font/nazanin.eot");  
   src: local("B Nazanin"),
     url("../font/nazanin.eot?#iefix") format('embedded-opentype'),
     url("../font/nazanin.woff") format("woff"),
     url("../font/nazanin.ttf") format("truetype"),
     url('../font/nazanin.svg') format('svg');
   font-weight: normal;
   font-style: normal;
}
@font-face {
   font-family: "Nazanin";
   src: url("../font/nazaninbold.eot");
   src: local("B Nazanin bold"),
     url("../font/nazaninbold.eot?#iefix") format('embedded-opentype'),
     url("../font/nazaninbold.woff") format("woff"),
     url("../font/nazaninbold.ttf") format("truetype"),
     url('../font/nazaninbold.svg') format('svg');
   font-weight: bold;
   font-style: normal;
}

by the way. I know the file of the fonts work correctly.


Solution

  • So you have correctly declared your font face. You need a class to be able to use it in your site. So your css file should look like this:

    mycustomfont {
        font-family: 'Nazanin';
        font-style: normal;\* or bold whatever you need *\
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
    
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    

    Then in the HTML:

    <div class="mycustomfont">Testing font</div>
    

    Hope this gives you an idea....