When using an arabic font with @fontfoce
rule, something strange happens: when it comes to Roman characers, almost all the browsers (except Opera) does not use the Roman charset of the font and instead they use the charset of the other fonts declared in the font-family
property. Let's illustrate it. Here's my @fontface
rule:
@font-face {
font-family: 'hasoobCM';
src: url('/media/fonts/hasoob.eot'); /* IE9 Compat Modes */
src:url('/media/fonts/hasoob.eot?#') format('eot'),
url('/media/fonts/hasoob.woff') format('woff'),
url('/media/fonts/hasoob.ttf') format('truetype');
}
And, here is the font declaration:
.hasoob { font-family: hasoobCM, Georgia, "Times New Roman"; }
Now, the Roman characters of the text will be that of Georgia
and not hasoobCM
.
And the funny part is, if I declare the font as .hasoob { font-family: hasoobCM; }
, then the problem is sovled and the characters render correctly. The problem is that I can not do that, because of inconsistency of the font-sizes.
So, what should I do to "force" the browsers to use all the charset of my font?
BTW, there is a unicode-range
in the @fontface
rule, but I don't know the exact full charset range of my font, and I'm not sure whether that will solve the issue or not.