Issue when using -webkit-text-stroke

[PolMrt]

Describe the bug
When using css class -webkit-text-stroke-color & -webkit-text-stroke-widthto put a border fitting the text, there are some unwantend border. Like this :

To Reproduce
Steps to reproduce the behavior:

1. Create a <div>
2. Put some text in it, especialy these characters : t, k, &, e
3. Add these css classes : -webkit-text-stroke-color: red; -webkit-text-stroke-width: .8px; color: transparent (it also works when setting a color to the text)

Expected behavior
This should looks like this (here, using system font) :

Environment

• OS: macOS 10.14
• App that renders the font : firefox
• Version of font : 3.13

[thagxt]

I came here for the same reason! +1

[rsms]

Did you by any chance use the fonts from Google Fonts?
If you did, can you please try with the official release from https://github.com/rsms/inter/releases/latest ?
If you didn't can you please provide information about what exact font files you are using? (otf, ttf, hinted or not, etc. And if you can, a sha or md5 checksum of the file data for the font file.)

[PolMrt]

I’m using the official files downloaded from your website.
Here is an example using the CDN https://jsfiddle.net/fc47r3b6/

[thagxt]

I also use the CDN: https://rsms.me/inter/inter.css

[rsms]

I see! You are using the variable font.

TL;DR: Use static/constant fonts instead of the variable version.

This is unfortunately a bug (or really, a limitation) of the rendering engine in some web browsers. The variable font uses overlapping shapes to be able to be variable (technical reasons.) Most quality font renderers will apply what is usually called "boolean union" on the shapes of a glyph prior to rendering. Not doing this causes issues with regular "filled" rendering in addition to stroked rendering.

For example, Figma correctly applies the boolean union on the glyph's shapes before generating stroke geometry:

However, some design tools like Sketch fails, just like some web browsers:

So, this is unfortunately an issue with the software rendering the font.

[apodtele]

Would you know how "boolean union" is performed on outlines/contours? I bet it is not trivial.

[rsms]

https://en.wikipedia.org/wiki/Boolean_operations_on_polygons

[apodtele]

The described algorithms operate on bitmaps or scan sweeps, i.e. during rendering not prior to it. It is rather expensive computationally. I was hoping that there was a good algorithm to merge outlines properly, which would be appropriate for this bug. Also, the overlap of the stroke paths is technically minute here unless you really track the winding number is a very special way.

To summarize, it is not a trivial problem and the overlaps were accepted in variable fonts rather hastily.