CSS3 unicode-range does not work in Firefox

Question

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/

Answer 1

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 spans and such...). But that could probably be sensibly slow.

UPDATE

It's now implemented, but not enabled by default. You can enable it with an about:config flag (layout.css.unicode-range.enabled)

Answer 2

it's old but a simple solution is:

font-family: WebNazanin, Arial;

I always using this method, it will display WebNazanin for arabic or persian chars and Arial for Latin.