Search code examples
csscross-browserfont-face

@font-face - problems with diacritic

I have a problem with CSS3 property for using my own fonts @font-face. In Chrome, Safari and IE10 browsers aren't any problems, but in other browsers there are several problems:

I used this code: (fonts Gabriola a monotype - same code for both) 

@font-face {
    font-family: "Gabriola";
    src: url("../fonts/Gabriola.eot?") format("eot"),
         url("../fonts/Gabriola.woff") format("woff"),
         url("../fonts/Gabriola.ttf") format("truetype"),
         url("../fonts/Gabriola.svg#Gabriola") format("svg");
    font-weight: normal;
    font-style: normal;
}

In Google Chrome everything is OK: Screen

Firefox replace letters with diacritic with an other font - Screen

Opera one of the included fonts doesn't display at all and the in the text with second one skip the letters with diacritic: Screen

In the new IE10 there's everything ok and the older ones (IE9 and IE8) are behaving like Firefox.

How can I repair this? Or at least replace the font-family in the problematic browsers with some universal font (like Arial, ...) and change the font-size property. For IE there are good hacks but how about Opera and Firefox?

Thank you!

Solution

  • Bad font file (without diacritics characters)... Solved.