Webfont missing ligatures in FF9
Using a webfont in a CSS, I discovered that FF9 renders wrong the ligatures "ff", "fi", "ffi" in that font, totally omitting them -- the word "office" becomes "oce" on screen.
I did set up test page, in the reference below, showing that behavior. The page shows correct with FF8, FF3.6, Chrome 16, Opera 11.60, IE 8.
Ọ̀nà àbáyọ tí a yàn
You made an error with the order of the rules.
If you use the font property then you set all font properties, so you override the -moz-font-feature-settings in the font rule that follows it.
To avoid such errors, is is always best to define all properties explicitly (font-size, font-family) and not use the generic font version.
It should work if you swap the order.
font: 0.9em MuseoSlab-500,Arial,Helvetica,sans-serif; -moz-font-feature-settings: "liga=0";Ka ìdáhùn ni ìṣètò kíkà 👍 1
All Replies (8)
You can turn off ligatures with the following CSS
-moz-font-feature-settings: "liga=0";
This worked for me, but according to the documentation it's not really a supported feature and may change as the CSS3 specification evolves.
Oh well, nice to see there should be a fix, but... Fix doesn't work! I just added the
-moz-font-feature-settings: "liga=0";
to the text element's style, in the test page, but it has no effect: ligatures still don't show at all.
Can anybody verify that?
Ti ṣàtúnṣe
Ọ̀nà àbáyọ Tí a Yàn
You made an error with the order of the rules.
If you use the font property then you set all font properties, so you override the -moz-font-feature-settings in the font rule that follows it.
To avoid such errors, is is always best to define all properties explicitly (font-size, font-family) and not use the generic font version.
It should work if you swap the order.
font: 0.9em MuseoSlab-500,Arial,Helvetica,sans-serif; -moz-font-feature-settings: "liga=0";
Ti ṣàtúnṣe
Oh wait, you're right: in a couple of reload of the page something didn't go properly, and the CSS hadn't been reloaded - so I was still using the wrong CSS: too bad that Firebug doesn't show those -moz settings at all, so I was blind testing (...)
--- My original reply: -------------------------------------------------- Well, the theory is clear to me (even though I admit I'm not a web designer/programmer), but unfortunately, even applying the font-feature property after the font one, has no effect. I updated the example, now it has the form you propose - incidentally, that was the first change I tried, and had no luck, hence I tried swapping, though nothing changed either.
Ti ṣàtúnṣe
You can use {Ctrl + F5} to reload the page from the server, by-passing the cache.
Thanks! Just hoping I'll remember the key assignment ;)