Webfont kerning not working

I am working on a font for a website and I need to kern some pairs like To, AVA, etc. I did it in Glyphs, then export as webfont, renderer in HTML and set CSS properties to make kerning pairs to work like this:

p {
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  font-kerning: normal;

I don’t know why this not working, the font render pretty well, but kern feature. Should I add some custom things at Masters / Instance?


Take a look at the CSS generated by the Test > Webfont Test HTML Script in my repo.

1 Like

kern is not working either. May be cos the font is made using a component? it’s a pixel font

Mmm, seems the problem is only in Safari :frowning:

That has nothing to do with kerning. It is most likely a mistake in the CSS, perhaps in the way the font is loaded, but also check the version of Safari you are using:

Are you using an SVG font conversion? SVG fonts do not support kerning.

Now works, it was something with cache I believe. Thanks

When you test a font, you should never install the font in the system. To test in browsers, use @font-face, otherwise: