I have some outlined text on a website, but the text is now appearing weirdly for some reason. Have a look at the image link below for additional detail.
Specs:
Here's the code (no h1 in real code)
.cleartext {
color: #000000;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000000;
}
.gbtext {
font-weight: 700;
}
<h1><span class="cleartext gbtext">It's clear</span> when you blah blah blah.</h1>
This is what I'm seeing:
It was the font, Sinkin Sans. It's not compatible. Changing it to Helvetica fixed it and it's close enough to Sinkin that most people probably wouldn't notice.
helvetica is a bit narrower and the periods/dots are squared, but not bad