Ligatures in Internet Explorer

Question

we are working on an icon font that will have an ultimate collection of glyphs and will be available for free http://www.webhostinghub.com/glyphs/ We think that the easiest way to use it is with ligatures and not through elaborate CSS just like many other projects do. The problem is that it doesn't seem that the ligatures do not seem to work in Internet Explorer. They do work just fine in Chrome, Firefox and Safari, but not in IE.

That is a shame, since it is Microsoft who was the first to use @font-face but for some reason they forget that fonts may have ligatures. Or maybe I am mistaken and I hope I am mistaken and there is some magic way to make them work. I would be very grateful for any advice on this subject. Or if there is no direct solution, maybe you know some workaround. Thank you for any information in advance!

Answer 1

Ligatures won't work in versions prior to IE10 using -ms-font-feature-settings

There really isn't an reliable method for cross browser ligatures with older browsers.

With CSS3 text-rendering: optimizeLegibility doesn't work in IE and ms-font-feature-settings is only supported as of IE10.

One alternative is to just use HTML entities, but then you're replacing letters with characters which would have a negative effect on SEO.

Ligature.js (link) is an alternative way to add ligature support. It's better than just using HTML entities, but it's not very practical for other reasons.

This is an excellent article that details the existing solutions and describes the CSS3 ligature handling for modern browsers.