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

Windows 7 users using Internet Explorer 10 or 11 are experiencing a bug that causes text to disappear when font-feature-settings are utilized. https://connect.microsoft.com/IE/feedbackdetail/view/831964

Windows 8 users do not experience the same issue.

If you have a lot of users using Windows 7 then simply removing font-feature-settings and -ms-font-feature-settings will cause the text to display.

I would still advice you to turn kerning on in the other browsers if you want text to display the same in all other browsers. You can ensure forward and backward compatibility like this:

.kern {
  -webkit-font-feature-settings: "kern" 1;
  -moz-font-feature-settings: "kern" 1;
  -moz-font-feature-settings: "kern=1";
  -o-font-feature-settings: "kern" 1;
  font-kerning: normal;
}

You can use javascript if you still want to present windows 8 and 10 users with kerning.

kern.css:

.kern {
  -webkit-font-feature-settings: "kern" 1;
  -moz-font-feature-settings: "kern" 1;
  -moz-font-feature-settings: "kern=1";
  -o-font-feature-settings: "kern" 1;
  font-kerning: normal;
}

.kern-ie {
  font-feature-settings: "kern" 1;
  -ms-font-feature-settings: "kern=1";
}

kern.js:

var ua = navigator.userAgent.toLowerCase();
var isNotWin7 = ua.indexOf('windows nt 6.1') == 0;
if (isNotWin7) {
    var kernedTextCollection = getElementsByClassName(".kern");
    for(var i = 0; i < kernedTextCollection.length; i++) {
        kernedTextCollection.item(i).className = kernedTextCollection.item(i).className + ' kern-ie';
    }
}

index.html: