1

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>
Lshiroc
  • 39
  • 2
  • 7
  • Does this answer your question? [Text Stroke (-webkit-text-stroke) css Problem](https://stackoverflow.com/questions/69253420/text-stroke-webkit-text-stroke-css-problem) – AlexanderD Nov 01 '22 at 21:06

1 Answers1

0

@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>
Lshiroc
  • 39
  • 2
  • 7
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 13 '22 at 12:16