Question

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!

Answer 1

Bad font file (without diacritics characters)… Solved.