Learn how to adjust kerning with CSS.
If your web font of choice includes kerning data, your browser will automatically determine if font-kerning should be applied to your text. It does this by using the font-kerning CSS property, which is set to auto by default:
font-kerning: auto;In other words, a browser may decide to apply kern to your font even if it has kerning data built-in (for whatever reason).
If you want to make sure that font-kerning is applied (if your font has it), regardless of the browsers “opinion”, then swap auto out with normal:
font-kerning: normal;If you want to turn off kerning, use none as a value:
font-kerning: none;Wait, why would you turn off kerning on a web font that has kerning available?
Well, perhaps you discover that your font-kerning renders wrong in X browser, e.g. due to a temporary browser bug. In that case, it’s nice to have the option of turning it off.
Another thing that sometimes occurs is that one-off text elements behave oddly in a specific situation, and in that case, it’s convenient that you can turn it off, e.g. with a CSS utility class:
.kerning-none {
font-kerning: none;
}How to tell if your web font has kerning data
A quick way to find out if your web font has kerning data or not is to disable and enable it back and forth, by setting it to none and normal and closely watch for text-rendering changes in your browser:
