Webfont kerning not working

1

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?

Thanks,

2

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

1 Like
3

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

4

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

5

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:
http://caniuse.com/#feat=font-kerning

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

6

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

7

When you test a font, you should never install the font in the system. To test in browsers, use @font-face, otherwise:
https://www.glyphsapp.com/tutorials/eliminating-font-cache-problems
and
https://www.glyphsapp.com/tutorials/testing-your-fonts-in-adobe-apps