Question 30752 in Wordpress Question posted in
The official Wordpress documentation can be found here.

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

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:

  • WordPress 5.8.3
  • Elementor / Pro 3.5.3 / 3.5.1
  • Font: Sinkin Sans

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    It’s because of the font. You cannot do probably anything and strokes on this font will be like on your img. But if you use text-shadow instead of -webkit-text-stroke, it’s hack a little bit, but it should work. The main cons is that the text cannot be transparent, because of shaddows, they will be visible, so you must set color of the text.

    .cleartext {
  color: #fff;
  text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px 0px 0 #000, 0px 1px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
}

.gbtext {
    font-weight: 700;
}
    <h1><span class="cleartext gbtext">It's clear</span> when you blah blah blah.</h1>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search