cssfirefoxunicode-range

CSS3 unicode-range does not work in Firefox


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:
Chrome


Firefox screenshot:
Firefox

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/


Solution

  • 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

    The feature is available in firefox since September 2016