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

问题:

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.

回答1:

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....