'How to remove extra lines at css text-stroke

I want to use text-stroke and make text transparent over image. But when I do it, text-stroke also show the lines which are inside the text. I use Montserrat(from google fonts). I would like to get your help

here is my html and css codes:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=block');

.header-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 66px;
  font-weight: 900;
  line-height: 117.02px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px black;
  -webkit-font-smoothing: antialiased;
}
<h1 class="header-title">ABCD EFGH</h1>
htmlcsstextborder


Solution 1:[1]

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=block');

.container {
  min-height: 100vh;
  background: url('https://imgs.search.brave.com/GlZ-EO67MwBX5URzZNAF3Y7KBf6z2s2fr21P2ZemVqY/rs:fit:1200:1200:1/g:ce/aHR0cDovL3d3dy5w/aXhlbHN0YWxrLm5l/dC93cC1jb250ZW50/L3VwbG9hZHMvMjAx/Ni8wNi9IRC1KdW5n/bGUtSW1hZ2UuanBn');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.alt {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  color: white;
  font-size: 33px;
  font-weight: 900;
  
  -webkit-font-smoothing: antialiased;
  font-family: 'Montserrat', sans-serif;
}
<div class="container">
  <h1 class="alt">ABCD EFGH</h1>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Lshiroc

Related Questions