Text Stroke (-webkit-text-stroke) CSS Problem

Diagnosis: -webkit-text-stroke Marginal Support for Variable Fonts

When encountering discrepancies in text stroke rendering across different browsers, the issue may lie with the interaction between -webkit-text-stroke and variable fonts.

Quick Fix: Update 2024 - Paint Order for HTML Text

To resolve this, we leverage the CSS paint-order property, which allows us to control the rendering order of fill and stroke. By setting paint-order: stroke fill, we prioritize the stroke over the text color, creating the desired effect.

Implementation:

Add the following CSS rule to your stylesheet:

.outline {
  -webkit-text-stroke: 0.04em black;
  paint-order: stroke fill;
}