Glyph Outlines Appear Distorted on Web


I’m having an issue with files exported from Glyphs. The problem I’m running into is that my glyph character outlines are becoming distorted and far too thick on the web. This problem occurs with all file formats you can export from Glyphs (EOT, OTF, WOFF, WOFF2 and GX). When used in programs such as Illustrator, InDesign and Sketch or on Variable Font tester sites like Axis Praxis the glyph outlines appear perfectly crisp and exactly how they were designed. Anyone have a clue as to why this is happening?

I’ve attached screenshots so you can see the problem, the black screenshot is how the outlines should look and the gray one is how they look on the web.

Thanks in advance for any help you can give!

When it looks good in axis-praxis, then it is not a general browser problem. Because axis-praxis runs in the browser, too.
In what browser do you see the problem?
Have you checked the CSS?

It looks like some faux bolding may be applied. This is common when you use header elements such as <h1> and <h2> and use a webfont without a bold. Your browser by default applies font-weight:bold to headings, but you can override that with CSS.

1 Like

@Lorp thanks so much for your reply, that’s exactly it! very helpful

1 Like