Font stroke effects display inconsistently between Figma design and Webflow implementation

Other Questions Figma
1

I’m having trouble getting my text styling to match between my Figma mockup and my Webflow site. The text stroke and font rendering look completely different even though I’m using identical CSS properties.

What’s happening:

  • My Figma design shows perfect white outline around pink text with a drop shadow.
  • The Webflow version looks totally wrong - the stroke doesn’t show up properly and the font appears different.

CSS I’m applying in Webflow:

color: #FF4776;
text-align: center;
font-feature-settings: 'ss01' on, 'liga' off;
text-shadow: 0px 3px 0px #FF4776;
-webkit-text-stroke-width: 4px;
-webkit-text-stroke-color: #F8FFFD;
font-family: Pally;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 48px;

Things I already tried:

  • Made sure the Pally font is uploaded correctly to Webflow.
  • Double checked there are no conflicting CSS classes.
  • Added the webkit stroke properties through custom code.
  • Tweaked the shadow values thinking they might interfere.

Questions I need help with:

  1. Why does webkit text stroke behave differently in Webflow compared to Figma previews?
  2. Are there better methods for creating text outlines in Webflow that work across different browsers?
  3. Could Webflow be handling the custom font or OpenType features differently than Figma?

Any ideas on how to make these match would be super helpful!

2

You’re manually fighting browser quirks and Webflow’s rendering issues when you could just automate the whole styling sync process.

I hit this same wall on a project where designers kept updating Figma text styles and devs burned hours trying to match them in Webflow. The webkit stroke differences and font rendering variations made consistency impossible.

We fixed it with an automated pipeline that pulls styling data straight from Figma and applies it to Webflow programmatically. No more hand-copying CSS values or wrestling with browser compatibility - the automation translates between platforms and handles their differences.

It catches when Figma uses web-unfriendly features (like your font-feature-settings) and automatically applies fallbacks. It also tackles webkit stroke inconsistencies by generating the right property combinations for each browser.

For your case, it’d grab your Figma text styles, spot the stroke/shadow conflicts, and auto-implement the best web solution - adjusting paint-order, splitting elements, or using SVG text when needed.

No more design-dev ping pong when text styling doesn’t match. Latenode makes this design-to-dev automation pretty straightforward.

3

Your text-shadow is messing with the webkit stroke. Shadows sit behind the stroke and create visual conflicts that break up the outline. Remove the text-shadow first and see if that fixes it. Webflow compresses fonts when you upload them, so strokes won’t look the same as they do in Figma. Your 4px stroke is pretty thick too - webkit might not handle it well on web fonts. Try dropping it to 2px. For better browser support, add paint-order: stroke fill; with your webkit stroke. This controls how strokes layer with the fill color and fixes those rendering differences between design tools and browsers.

4

webkit text stroke is buggy as hell across browsers and webflow renders it totally different from figma. just duplicate your text element, put it behind the main one with only the stroke color, and offset it slightly. way more reliable than webkit properties.

5

Been fighting this for months. Webflow’s text engine handles font-feature-settings way differently than Figma’s preview. Your ‘ss01’ stylistic set probably isn’t loading in browsers even though Figma shows it working. Remove font-feature-settings temporarily and see if the stroke renders properly. Also check if your Pally web font actually has all the OpenType features - web versions are often stripped down compared to what Figma uses. For the stroke issue, Webflow can be picky about text-stroke property order and needs fallbacks. Add -moz-text-stroke properties as backup even though Firefox support sucks.