11

Firefox and Safari are not rendering text using fonts with Arabic ligatures

Here is one sample glyph form svg font: 

<glyph unicode="بِسْمِ" glyph-name="uniFB51" horiz-adv-x="1423" d="path.." />

Tried replacing arabic ligatures with english text and it works! 

<glyph unicode="1234" glyph-name="uniFB51" horiz-adv-x="1423" d="path.." />

What's wrong with these two browsers ? how can I fix the problem, am I doing something wrong with ligature?

DEMO: http://ligga.herokuapp.com/ Please test demo in chrome and firefox to see the difference.

CSS I'm using to enable ligga feature:

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Screenshots

Firefox

enter image description here

Chrome

enter image description here

Browsers which are not rendering text using fonts are:

  • Firefox on Mac
  • Safari

Browsers which are rendering text correctly:

  • Chrome on all OS( tested on mac, android, ubuntu, windows )
  • Opera ( tested on android )
  • Firefox on windows ( that's odd, doesn't firefox use same engine( Gecko ) on all platform? )
Naveed
  • 11,057
  • 2
  • 44
  • 63
  • can you also show the CSS you're using, so that we can see whether you've remembered to activate the `liga` feature? – Mike 'Pomax' Kamermans Mar 09 '17 at 16:54
  • @Mike'Pomax'Kamermans sure, i've adding css in bottom of demo page. Please review: http://ligga.herokuapp.com/ – Naveed Mar 09 '17 at 18:29
  • no: please add all the information to your *question*, not just on a page you're telling people to visit. your link will expire at some point in the future, so if you don't put it in your questions, future visitors cannot benefit from your question because you did not include all the necessary information. – Mike 'Pomax' Kamermans Mar 09 '17 at 19:02
  • @Mike'Pomax'Kamermans make sense. Sorry! Added the css in question – Naveed Mar 09 '17 at 20:35
  • wait, are you using an actual SVG font? Because that's not even a legal spec anymore, SVG fonts have been abandoned because they had more problems for real typesetting than they solved. If you want fons on the web, eot and svg are not options anymore, you should be using a WOFF font here (specifically, too. Don't use ttf/otf, use those to generate your WOFF) – Mike 'Pomax' Kamermans Mar 09 '17 at 20:46
  • Nupe, I'm using ttf fonts. Converted svg to ttf using icomoon. – Naveed Mar 09 '17 at 20:49
  • 1
    the real question here, then, is not why does it not work in firefox, but why does it work in chrome: glyph names are not a thing in OpenType fonts, so iconmoon should have stripped those completely. The fact that changing this makes a different at all suggests a bug in iconmoon's conversion process. I'd strongly recommend using a real font tool if you have that option. – Mike 'Pomax' Kamermans Mar 09 '17 at 20:52
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/137701/discussion-between-naveed-and-mike-pomax-kamermans). – Naveed Mar 09 '17 at 21:04
  • 1
    I did a test in Firefox 52 and Chrome 56, and I see no difference. http://imgur.com/a/9glsT – Mike 'Pomax' Kamermans Mar 14 '17 at 20:40
  • @Mike'Pomax'Kamermans you are on windows ? Ubuntu ? Sadly totally different result for me on mac – Naveed Mar 14 '17 at 21:50
  • Ligatures indeed won't work on Firefox on OSX. I suggest filing a bug, @Naveed. It'd be useful to update the post with which browser/OS combination this problem is occuring. – RoelN Mar 15 '17 at 12:24
  • @RoelN thanks for suggestion, updated the question. – Naveed Mar 15 '17 at 13:15
  • Yeah, this was on Windows 10. I don't see any bugs for firefox atm around ligatures and OSX, so filing that on bugzilla.mozilla.org to make sure they're aware of it and can fix it, with steps-to-reproduce, is a good idea. – Mike 'Pomax' Kamermans Mar 15 '17 at 14:43
  • Please look into this http://stackoverflow.com/questions/37226949/characters-like-tt-ti-ff-in-my-html-page-disappears-while-viewing-with – Tom Taylor Mar 18 '17 at 13:27
  • @Mike'Pomax'Kamermans although I couldn't find the answer but wanted to give bounty to you for taking your time in discussing this issue. Please post an answer explaining this is bug with firefox :) – Naveed Mar 18 '17 at 20:42
  • 1
    that's okay, feel free to post that answer yourself and keep the bounty for a future question =) – Mike 'Pomax' Kamermans Mar 19 '17 at 19:50

0 Answers0