Safari and IE can't read TTF and EOT fonts

Question

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

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

Answer 1

Search for syntax errors

The example CSS shows multiple syntax errors:

1. comments in plain CSS must be enclosed with /* and */ – doesn't apply to SCSS/Sass code that't compiled
2. the last style rule is not closed correctly by a "curly bracket"}

Font source stack

Fortunately, we don't have to bother about ie anymore.
So whenever you see an .eot file included in a font kit or referenced in an example CSS – you can safely delete it.

.eot was only required up to ie8 (~ 2008, replaced by ie9 in 2011)

Let's say ie's proprietary .eot format was still relevant – the CSS won't work either:

@font-face{
    font-family: Bariol_Bold;
    src:url("fonts/bariol_bold.eot"); 
}

/* Takes precedence – won't work for ie "browser" */
@font-face{ 
    font-family: Bariol_Bold;
    src:url("fonts/bariol_bold.ttf"); 
}

The second @font-face rule would simply override the previous one (for ie). A correct src stack – taking the first valid font file candidate – would be:

@font-face{
    font-family: Bariol_Bold;
    src: url("fonts/bariol_bold.eot"),
         url("fonts/bariol_bold.ttf");
}

Different sources must be separated by a comma ,. Any sane browser would skip the eot file and stick to the first valid font file – in this case the truetype.

Thanks to the demise of ie we can safely rely on woff2 support.
Thus, you can simplify you @font-face by referencing just a single font file like so:

@font-face{
    font-family: Bariol_Bold;
    src: url("fonts/bariol_bold.woff2") format('woff2');
}

or with extended legacy support

@font-face{
    font-family: Bariol_Bold;
    src: url("fonts/bariol_bold.woff2") format('woff2'),
         url("fonts/bariol_bold.woff") format('woff'),
         url("fonts/bariol_bold.ttf") format('truetype');
}

While format identifiers can often be omitted you should better include them for best compatibility. Heads up: the correct identifier for truetype is format('truetype') not 'ttf' – invalid identifiers will break the rule.

Besides, you should specify font-weights and styles in the font-face rule instead of defining new font-family names for each style:

/* regular */
@font-face{
    font-family: Bariol;
    font-weight: 400;
    font-style: normal;
    src: url("fonts/bariol.woff2") format('woff2'),
         url("fonts/bariol.woff") format('woff'),
         url("fonts/bariol.ttf") format('truetype');
}

/* italic */
@font-face{
    font-family: Bariol;
    font-weight: 400;
    font-style: italic;
    src: url("fonts/bariol_italic.woff2") format('woff2'),
         url("fonts/bariol_italic.woff") format('woff'),
         url("fonts/bariol_italic.ttf") format('truetype');
}

/* bold */
@font-face{
    font-family: Bariol;
    font-weight: 700;
    font-style: normal;
    src: url("fonts/bariol_bold.woff2") format('woff2'),
         url("fonts/bariol_bold.woff") format('woff'),
         url("fonts/bariol_bold.ttf") format('truetype');
}

/* bold italic */
@font-face{
    font-family: Bariol;
    font-weight: 700;
    font-style: talic;
    src: url("fonts/bariol_bold_italic.woff2") format('woff2'),
         url("fonts/bariol_bold_italic.woff") format('woff'),
         url("fonts/bariol_bold_italic.ttf") format('truetype');
}

Answer 2

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

@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');
}

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.