CODEWITHSUNDEEP
csswebfontstext-renderingkerning
ayjee
ayjee

Reputation: 11

webfont has incorrect kerning in IE10, IE11

I am working on a project for a client that uses a custom created webfont. The webfont displays with correct kerning in Chrome, Safari, Firefox and Opera when I implement the following styles:

text-rendering: optimizeLegibility;
font-feature-settings: "kern";

In IE10/IE11, the font does not display with correct kerning with or without the above styles. I have tried a variety of options without success. Per MDN, the font-feature-settings property is supported in IE10+. In fact, when I inspect I can see that the font-feature-settings: kern -- being applied but there is no change to the kerning. Any suggestions would be appreciated, thanks.

Upvotes: 1

Views: 1041

Answers (1)

Sasha Vodnik
Sasha Vodnik

Reputation: 195

Microsoft's demo page on this subject shows a different syntax than you're using:

/* enable kerning data */ 
.kerning { 
   text-rendering: optimizeLegibility; 
   -moz-font-feature-settings: "kern=1"; 
   -ms-font-feature-settings: "kern" 1; 
}

Note two MS-specific differences:

  1. The font-feature-settings property has a -ms- prefix.
  2. The value "kern" is followed by a space and a value before the semicolon.

Upvotes: 1

Related Questions