How to avoid ligatures within option-tag?

Question

I'd like to create a visually appealing select-dialog that shows FontAwesome-Icons and a word describing the symbol to select from various scales for statistical data.

So I'm using the FontAwesome-Fonts for the select-tag and the unicode-glyphs for the various symbols. That first part works nicely. But the words I am using are also used in FonAwesome to form ligatures that can also be used to get the icons (I thought this was limited to the desktop-version, but as my example prooves, it also happens on the web). The FA-Site states that they are "...aren't comfortable considering ligatures for Web Fonts + CSS".

Please check out my fiddle here or the screenshot:

So, my questions are:

• if it's not supposed to happen with Webfonts/CSS - is there anything that I am doing wrong using them? (Of course I have the desktop-fonts installed on my machine, I guess we won't know if users of the website will have them or not)

• is there any way I can avoid the ligatures taking effect within the option-tag? (as you see in the sample, I am already using font-variant-ligatures: none; in the CSS)

Answer 1

I found a way to solve this by defining dedicated @font-faces with a different name. (My theory is that Chrome uses the local font I have installed and that it's ligatures override everything I do in CSS). That "special font-face" is sure not to be found locally...

If someone finds a better explanation or fix, I'll happily accept it.