Kerning in Font-Preview

Has anybody else experienced kerning problems in the preview? My font is perfecty spaced and kerned and it seems that the preview doesn‘t support it or at least it‘s not as precise as on Desktop apps like Illustrator or Photoshop.

https://creativemarket.com/monogramworld/6612005-Monogramica-–-Unique-Ligature-Font

I have more than 500 kerning pairs, especially for the letters r, s, x and z.

If you take a look at „The quick brown fox…“ the br looks displaced.

Any ideas?

First off…lovely font!! :slightly_smiling_face:
This might be down the joy of webdesign and browser rendering. I’ve had a look on Chrome for Android and it looks perfectly fine! What browser were you using? Have you tried looking at it on a different browser and device (damn I sound like IT support when they don’t know what to say haha). But sounds to me like a font rendering issue, not sure there’s much can be done about that. Definitely not an issue with the font which is a positive :grin:

1 Like

looks good on my preview on chrome as well

1 Like

Hey guys,

Thank you for your feedback and compliments :slight_smile: It’s a relief that it doesn’t look everywhere like at my preview.

Actually I’m feeling like a beginner too at the moment, because I forgot to mention the environment.

I’m on Mac Os 11.2.1 Big Sur. It happens in Chrome, Firefox and Safari. Here is a Screenshot to make it clearer. There is a small displacement at the r and x.



Bildschirmfoto 2021-10-29 um 08.42.35

Thanks a lot for your answers :slight_smile: Now I’m trying to get a preview on Windows too and check it there :wink:

I see the same thing in safari indeed. That’s annoying.

I found Opentype SVG fonts to be even worse. In any browser…
https://creativemarket.com/Manon.Lef/6598718-Katie-Roze-Watercolor-Font

I’ve had similar issues with my script fonts as well. Seems to be some small kerning issue on the website. I reached out to CM a while back about this and they said it looked fine on their end… So I was at a bit of a loss. Would be interested to hear if this ever get’s resolved.
I know this isn’t an answer to your question, but at least you know someone else is dealing with it!

1 Like

Is your UPM 1000? If not, it’ll likely get scaled when the site converts it for the previews. Or maybe they’re using a different UPM for the web previews. That would explain why the kerning precision would be off since kerning values are integers.

1 Like

Thanks for that input. I didn’t think about that. :thinking:

Actually I exported my font at 4096 units per em, because my font has many details and vertices. With 1000 (1024) it looked awful clumsy and the smooth edges and strokes were rough and stitchy when I zoomed in.

So maybe I could try to export with 2048 or 1024 / 1000 again…

Another idea: Does it have to do with OTF or TTF? Should I put the OTF file within a separate folder so that it takes the TTF for the preview?

Hopefully someone at Creative Market will see this thread and can fill us in on the preview webfont conversion process. My best guess is that they would get automatically converted to OTF and UPM 1000 in a WOFF2 container.

1 Like