Add stroke around text – on the outside – with css?

The -webkit-text-stroke doesn’t support placing the stroke on the outside of the text

as this CSS-Tricks atricle explains:

The stroke drawn by text-stroke is aligned to the center of the text shape (as is the default in Adobe Illustrator), and there is currently no option to set the alignment to the inside or outside of the shape. Unfortunately this makes it much less usable, as no matter what now the stroke interferes with the shape of the letter destroying the original type designers intent. A setting would be ideal, but if we had to pick one, outside stroke would have been much more useful.

What about SVG?

Well it seems that it also places the stroke on the inside –

FIDDLE

However,

you might be able to simulate this effect (depending on what you need) by:

1) Change your font to a sans serif like verdana and

2) Make the font-size of text you are adding a stroke to slightly larger

body {
  background: grey;
  font-family: verdana;
}
.stroke,
.no-stroke {
  color: white;
  font-size: 2.5em;
}
.stroke {
  -webkit-text-stroke: 2px black;
   font-size: 2.7em;
}

<h1 class="stroke">WHAT CARRER SHOULD YOU HAVE ?</h1>
<h1 class="no-stroke">WHAT CARRER SHOULD YOU HAVE ?</h1>

Expand snippet