Ligatures in CSS3 @font-face

Question

I heard that it is possible to have ligatures in a CSS3 @font-face icon / symbol font, but that it is not supported in IE 9 and less.

Does anyone know how to get them to work in IE 9 and less? Is there a way to do it with JavaScript or JQuery?

The only solution I can think of it switching the multi-letter (ligature) content for a single letter that represents the same symbol when ligatures are not supported.

Answer 1

Ligatures can be enabled by using browser-prefixed versions of the font-feature-settings property or the text-rendering property (or, in principle, font-variant-ligatures, but this is probably not supported by any browser yet). These work both for installed fonts and downloadable fonts, provided that the font contains ligatures and information about them in OpenType format (most fonts commonly used on web pages don’t).

But these are not supported by IE 9 and earlier. There is probably no JavaScript-based way to overcome this. Replacing character sequences by ligature characters is possible of course, but it only works for a small set of ligatures, namely those that have been encoded as characters in Unicode (and only for fonts containing them).