How do I apply text stroke in CSS that only appears around the outside of the individual letters?

Question

I am trying to apply text stroke for some headings for a webpage that I am building but regardless of whether I'm using -webkit-text-stroke or exporting the heading as a SVG, the text stroke is always applied incorrectly.

I have tried using -webkit-text-stroke, but it isn't achieving the look I want. I initially designed the webpage in Figma and tried exporting the heading as a SVG, but when I try this the text stroke is being applied to the inside of the letters (see the first image below) despite having specified in Figma that it should only be applied on the outside. Am I missing something here?

These are the different ways I've tried applying -webkit-text-stroke:

Example 1 -webkit-text-stroke: 1px #000000; -webkit-text-fill-color: #F45800;

Example 2 -webkit-text-stroke-color: #000000; -webkit-text-stroke-width: 1px;

Is there a way to apply genuine text stroke to only the outside of the letters? I have seen other people suggesting to use text-shadow, but honestly it doesn't achieve the exact same look.

I've included examples below of what I'm trying to achieve vs what I'm currently working with.

This is what I am trying to achieve in CSS

This is what I get when exporting as a SVG from Figma AND using -webkit-text-stroke in CSS

Thanks in advance!

Answer 1

I can’t see anything wrong with this:

h1 {
  font-family: sans-serif;
  font-size: 3em;
  font-style: italic;
  text-transform: uppercase;
  color: tomato;
  -webkit-text-stroke: 2px black;
  margin: 0;
}

<h1>Hello</h1>