htmlcsswordpresswebkitelementor

My outlined text is appearing weirdly (font lines are appearing in transparent area)


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:

the font lines are entering the space that should be transparent


Solution

  • 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