google / google/fonts

Internal lines visible when drawing as an outline using CSS text-stroke/fill, affects multiple fonts

Open
#8,731 7 comments 1 reaction 0 assignees View on GitHub
I Font Bug
Dominant language
HTML
Stars
20.5k
Forks
2.9k
Avg merge
1d 21h
Merged PRs (30d)
95

Description

This affects **Instrument**, **Inter**, **Heebo**, and more. (Possibly any font packaged after 2020)

**Describe the bug**

When using text-stroke/text-fill-color to draw the font as an outline, the Google copy of these fonts look incorrect, showing internal lines.

The original fonts do not show this issue, when testing using the version compiled for releases on their repos.

**To Reproduce**

Use any of these fonts via Google Fonts embed, or using the files downloaded from Google Fonts, on a web page.
Apply the following CSS to the text:
```
-webkit-text-stroke: 0.01em black;
-webkit-text-fill-color: white;
```

**Expected behavior**

The internal lines should not show. Like Lato, for example:

**Additional context**

Appears on both recent Windows/Mac.

This issue was raised [before](https://github.com/google/fonts/issues/2502) specifically for Heebo, but as this affects multiple fonts I'm raising a new issue as it does not appear to be font-specific.

This may affect all fonts packaged after 2020, so may be a font packager issue introduced around then.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.