Kevin Powell - Community•2mo ago

stroke text

Hi guys, I want to create some text like the picture but when I use text-stroke the text is broken. Is there any way to fix it?

p{
  font-family: "Inter", sans-serif;
  font-size: 70px;
  -webkit-text-stroke: 4px navy;
  font-weight: 700; 
  color:transparent; 
/*   letter-spacing: 2px; */
}

p{
  font-family: "Inter", sans-serif;
  font-size: 70px;
  -webkit-text-stroke: 4px navy;
  font-weight: 700; 
  color:transparent; 
/*   letter-spacing: 2px; */
}

4 Replies

Mannix•2mo ago

this seems to be a issue with the font nothing you can do about it i'm afraid

Alex•2mo ago

It looks bad because of the way the font is built. However, you can achieve an approximation of an outline with a series of text shadows: https://codepen.io/Beanie127/pen/GRbaKVN

Beanie127

CodePen

Discount text-stroke

...

Alex•2mo ago

Note you have to set an actual colour on the text rather than transparent, otherwise the shadow will be visible behind the text, and to scale it up to larger sizes, you'd need an increasing number of shadows to fill in each angle to make it look even slightly good (to see what I mean, scale up each 1px to 4px).

empty•2mo ago

Thank you. I'll try

Gaming

Programming

stroke text