I'm using CSS3
property unicode-range
to set different fonts for different character sets. Arial
for Latin characters and a WebNazanin
for Arabic/Farsi. It seems to work in Chrome 29 and IE10 but not in Firefox 23, it still uses Arial
font in Firefox:
Chrome screenshot:
It's my css:
@font-face {
font-family: 'WebNazanin';
src: url('http://awebfont.ir/services/fonts/775b712c01cdf4eb7f15d9180567345060f700291901931.eot'),
url('http://awebfont.ir/services/fonts/775b712c01cdf4eb7f15d9180567345060f700291901931.otf') format('opentype'),url('http://awebfont.ir/services/fonts/775b712c01cdf4eb7f15d9180567345060f700291901931.woff') format('woff'),
url('http://awebfont.ir/services/fonts/775b712c01cdf4eb7f15d9180567345060f700291901931.ttf') format('truetype'),
url('http://awebfont.ir/services/fonts/775b712c01cdf4eb7f15d9180567345060f700291901931.svg') format('svg');
}
@font-face {
font-family:'WebNazanin';
src: local('Times New Roman');
unicode-range: U+41-7F;
}
JSFiddle: http://jsfiddle.net/maysamsh/t9MpF/
you are correct. Firefox does not support unicode-range
.
https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-range#Browser_compatibility
They are working on it. Since 4 years.
If it's really important to you, you may need to search for a javascript solution (like looking at every char and inserting styled span
s and such...). But that could probably be sensibly slow.
The feature is available in firefox since September 2016