CSS Outline font issue

Question

This might have been answered, but i couldn't find how to fix it. I'm having trouble with css outline on some text. It appears to outline multiple lines in the same letter. Here is what it looks like :

And here is the code i'm using:

.big-outline-text {
  position: relative;
  font-size: 15vw;
  text-transform: uppercase;
  font-weight: bold;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: $black30;
  line-height: 0.8;
}

Is this an issue with my code? Or with the font file? How can i fix it?

Thanks a lot for the answers!

Answer 1

Based on what you have provided it is something else that is conflicting. I've put your css in jsfiddle and it appears with only one outline.

https://jsfiddle.net/rocv3tf9/1/

HTML

<div class="big-outline-text">
What
</div>

CSS

.big-outline-text {
  position: relative;
  font-size: 15vw;
  text-transform: uppercase;
  font-weight: bold;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: $black30;
  line-height: 0.8;
}