Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 unicode-range does not work in Firefox

CSS3 unicode-range does not work in Firefox

Problem

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/

Problem courtesy of: Maysam

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

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

Solution courtesy of: Roman

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 unicode-range does not work in Firefox

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×