Text outline and typography displaying inconsistently between Figma design and Webflow implementation

Other Questions Figma
1

I’m working on matching a text design from Figma in my Webflow project but running into rendering issues. The typography and outline effects look perfect in my design file but appear totally different when I build it in Webflow.

What’s happening:

  • Figma shows clean white outline around text with purple drop shadow
  • Webflow version looks wrong even with identical CSS properties
  • Font appears different despite using same typeface

Here’s the CSS I copied from Figma:

color: #9B59B6;
text-align: center;
font-feature-settings: 'ss02' on, 'liga' off;
text-shadow: 0px 2px 0px #9B59B6;
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: #FFFFFF;
font-family: Montserrat;
font-size: 36px;
font-style: normal;
font-weight: 800;
line-height: 44px;

Things I already tried:

  • Uploaded custom font files to Webflow
  • Double checked no other CSS is overriding my styles
  • Added webkit stroke properties through custom code panel
  • Tweaked shadow values thinking they might conflict with outline

Questions I have:

  1. Why do text outlines render so differently between these platforms?
  2. What’s the best approach for webkit text stroke in Webflow?
  3. Could Webflow be handling my custom font or OpenType features incorrectly?

Any help would be awesome!

2

webkit-text-stroke is an inconsistent feature across browsers. Figma uses its own rendering engine, while Webflow relies on the browser’s rendering, which leads to these discrepancies. I’ve faced similar issues where the stroke displays differently due to variations in anti-aliasing.

A practical solution is to abandon webkit-text-stroke. Instead, duplicate your text element in Webflow, create a “stroke” layer with a thicker white font-weight, and position it slightly behind the main text. Layer your purple text on top and adjust its position using relative or absolute positioning.

Regarding font rendering, Webflow can alter OpenType features upon font upload. Try disabling font-feature-settings temporarily to diagnose if that’s contributing to the differences.

3

webkit stroke support in webflow is janky compared to figma’s preview. drop the text-stroke width to 2px instead of 3px - that might help. also double-check that your montserrat variant actually loaded. webflow sometimes falls back to system fonts without warning, which screws up the whole appearance.