For some reason, I'm encountering issues with the CSS3 property @font-face in certain browsers when trying to use my own fonts. Chrome, Safari, and IE10 work fine, but other browsers present several problems:
The code I used looks like this: (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 works perfectly: Screen
However, Firefox is replacing letters with diacritics using a different font - Screen
Opera seems to have trouble displaying one of the included fonts, and skips letters with diacritics in the text using the second one: Screen
In the new IE10 everything works smoothly, but older versions like IE9 and IE8 behave similarly to Firefox.
Does anyone have suggestions on how to fix this issue? Or perhaps recommend replacing the font-family in problematic browsers with a universal font like Arial, and adjusting the font-size property. While there are hacks available for IE, what about Opera and Firefox?
Any help would be greatly appreciated!