Search code examples
csstext

Weird artifacts when using text-outline css property

When I am using -webkit-text-outline property there are weird artifacts that shows up on the outline. How can I fix it. I have seen that on genius.com there are no artifacts, and they are also using -webkit-text-outline (example https://genius.com/a/ken-carson-feels-betrayed-on-new-song-the-end), so this is not a problem with a webbrowser, but something in my code must work wrong.

Website: https://dnidomaturypl.netlify.app

Source Code: https://github.com/mbledkowski/dnidomatury

artifacts image

Solution

  • -it's totaly related to font design, we cannot change it different font brhaves differently whith -webkit-text-outline property.

    • It's because how the font were build.

    .Poppins {
  font-family: 'Poppins', sans-serif;
}

.Poppins {
  font-family: 'Jost', sans-serif;
}

.roboto {
  font-family: 'Roboto', sans-serif;
}

h1 {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
}
    <h1 class="Poppins">Poppins</h1>
<h1 class="Poppins">Jost</h1>
<h1 class="roboto">Roboto</h1>