-
I have trouble reading a font in Safari. I converted OTF to TTF – two bold and regular fonts. Both are fine in Chrome and Firefox. But in Safari, only the bold font is works, regular does not.
-
IE does not read the EOT font which I have converted from a website. Is there any better way to convert OTF to EOT?
Here is my code:
<style type="text/css">
//Bariol_Bold
@font-face{
font-family: Bariol_Bold;
src:url("fonts/bariol_bold.eot"); /*For ie browser*/
}
@font-face{
font-family: Bariol_Bold;
src:url("fonts/bariol_bold.ttf"); /*For other browsers*/
}
//Bariol_Regular
@font-face{
font-family:bariol_regular;
src:url("fonts/bariol_regular.eot"); /*For ie browser*/
}
@font-face{
font-family: bariol_regular;
src:url("fonts/bariol_regular.ttf"); /*For other browsers*/
</style>
<p style="font-family: Bariol_Bold; font-size: 20px;">hello world</p>
<p style="font-family: bariol_regular; font-size: 20px;">hello world</p>
Best Answer
You should check Paul Irish's Bulletproof
@font-face
Syntax or FontSpring's@font-face
Syntax which needs multiple declarations of the the same font in different file types to server multiple browsers.The basic declaration is like
I also prefer FontSquirrel's
@font-face
Generator but you can Google other alternatives. FontSquirrel just needs one font to be converted and it will provide you with a basic.zip
file that contains necessary font types plus a sample demo of the fonts generated.