MSIE 10, web font and font-feature-settings causes invisible text

Question

I think this is really a bug in Microsoft Internet Explorer 10 but I could not find any explanation of the issue anywhere. A live demo of problem can be found at http://jsfiddle

Answer 1

My suggestion is to remove the font-feature-setting property, as it is not making the text easier to read.

The reason is that only IE supports font-feature-setting. All other browsers are dropping the property, and thus there is no change to text rendering in non-IE browsers.

WebKit and Blink browsers do support the property with a webkit prefix, and Firefox supports it with a moz prefix, but they do not support the prefixless one used in the jsFiddle.

If you must use this and not give it to IE, you could add the moz and webkit prefixes and remove the prefixless version, but bear in mind that it will then never use this property in IE, and will be dropped in other browsers if they ever remove their prefixed version.

Note: it looks like using this property makes the text invisible in IE10 and 11 on Windows 7, but works as expected in IE10 and 11 on Windows 8.x.