CSS3 unicode-range does not work in Firefox
Asked Answered
G

2

9

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/

Glove answered 14/9, 2013 at 15:3 Comment(2)
By “Arial”, you mean “Times New Roman”, right? (Judging from the screen shots and the CSS code.)Voluptuous
@JukkaK.Korpela ah, maybe, Arial or Times New Roman, no differences, just I want a different font.Glove
S
8

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)

Sceptre answered 14/9, 2013 at 15:21 Comment(0)
S
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.

Socialite answered 9/12, 2015 at 7:7 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.