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