yakov thin fonts incorrect display

Question

I have embedded Yakov thin fonts with CSS via @font-face but the fonts are are so different from the original ones. What could be the reason for this? Here is my code

@font-face 
{
    font-family:'Yakovthin';
    src: url('../fonts/yakovthin-webfont.eot');
    src: url('../fonts/yakovthin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/yakovthin-webfont.woff') format('woff'),
         url('../fonts/yakovthin-webfont.ttf') format('truetype'),
         url('../fonts/yakovthin-webfont.svg#') format('svg');
}

div#mainContainer
{
   font-family:'Yakovthin';
   font-size:12px;
}

Could anyone please help?

Answer 1

I have solved the issue. The problem was that the site the fonts were not generalized properly.

Answer 2

Can you provide a URL? Also, try adding font-weight: normal to your code:

@font-face 
{
    font-family:'Yakovthin';
    src: url('../fonts/yakovthin-webfont.eot');
    src: url('../fonts/yakovthin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/yakovthin-webfont.woff') format('woff'),
         url('../fonts/yakovthin-webfont.ttf') format('truetype'),
         url('../fonts/yakovthin-webfont.svg#') format('svg');
    font-weight: normal;
}

div#mainContainer
{
   font-family:'Yakovthin';
   font-size:12px;
   font-weight: normal;
}

Answer 3

You should try this instead :

@font-face 
{
    font-family:'Yakovthin';
    src: url('../fonts/yakovthin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/yakovthin-webfont.woff') format('woff'),
         url('../fonts/yakovthin-webfont.ttf') format('truetype'),
         url('../fonts/yakovthin-webfont.svg#') format('svg');
    font-weight: normal;
}

I'm pretty sure you can drop the .eot format, as when .ttf isn't supported, .woff is, so it should do the trick. You should also learn about the "unicode-range" option if you want to deal with Hebrew.