Text Stroke Rendering Issue

[kyrylolvov]

Font Name (Geist Sans/Geist Mono):

• [x] Geist Sans
• [ ] Geist Mono

Description of the Issue: The Geist Sans font is incorrectly rendered when applying -webkit-text-stroke-color property.

Steps to Reproduce: Apply these styles:

-webkit-text-fill-color: white;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;

Screenshots:

Environment (please complete the following information):

• OS: MacOS
• Software: Arc Browser
• Version of the Font: 1.3

[kyrylolvov]

@guidoferreyra Hello! Is this on the roadmap of fixes? As I saw a similar issue, but it was closed by the author.

[guidoferreyra]

Hi @kyrylolvov! On variable fonts it’s needed to keep the overlaps for better and smoother inteporlation. Unfortunately this get is the way of using outlines and strokes. It’s supossed that browsers and apps will change the way of how they apply outlines to text but is not possible to know when this will happen.

There is a CSS workaround using text shadow

.outline-text {
    color: white;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

[kyrylolvov]

Hi @kyrylolvov! On variable fonts it’s needed to keep the overlaps for better and smoother inteporlation. Unfortunately this get is the way of using outlines and strokes. It’s supossed that browsers and apps will change the way of how they apply outlines to text but is not possible to know when this will happen.

There is a CSS workaround using text shadow

.outline-text {
    color: white;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

Thank you for your answer and assistance, it works! :)