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:
Firefox 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/