Streaming live at 10am (PST)

CSS stroke text WEIRDNESS

Hope you’re all safe and well!

I’ve added a stroke to some text following Can you add a stroke to text? - #2 by sarahfrison

Having done this before loads of times, I’ve never had an issue. This time I’m using Google’s Cabin font, and it’s drawing a stroke around the insides of letterforms like this: https://uploads-ssl.webflow.com/61b7367ca6d7d407146d75b9/61c1e695df33ef50d8162576_font-issue.png

Any idea why? I can probably swap out all the text for SVG images instead but I’d prefer live text so the client can tweak if they want.

It didn’t do this in Figma so I’m a little stumped why it would do it in the browser.


Here is my site Read-Only:
https://preview.webflow.com/preview/building-heroes?utm_medium=preview_link&utm_source=designer&utm_content=building-heroes&preview=f7b7b43289a3e96d140fe8c89c7fe029&workflow=preview

Any ideas why this might be happening will be very gratefully received :upside_down_face:

Many thanks,
Gordon

Anyone seen this before? :face_with_monocle:

I just started having this issue as well. I added outlined text to my website weeks ago, and it was working properly for weeks until I noticed today the same issue you’re seeing (haven’t made any changes or republished the website)…

This is the custom code I’m using:

.link-outline-text { -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.75px #FFFFFF; }

Read-Only Link:
https://preview.webflow.com/preview/east-coast-van-builds?utm_medium=preview_link&utm_source=designer&utm_content=east-coast-van-builds&preview=b7a278ef0706897f06b47b81435cf81b&workflow=preview

Annoying huh? I think it is due to the way the typeface is put together. I just swapped for a similar font that behaved in the end. Not sure if there is actually a fix, sorry.

1 Like