I am designing a text heading in Figma and attempting to replicate the exact design in Webflow, but I’m encountering an issue with how the font and text stroke are rendering.
Here’s the issue:
- In Figma, the font and text stroke appear correctly with a white stroke around the text and a pink shadow.
- However, in Webflow, despite using the same CSS properties, the font renders incorrectly, and the stroke effect doesn’t display as expected. The font style looks completely different on the website, even though I’ve tried to apply the same styles.
Here’s a comparison of both:
CSS from Figma that I’m using 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; /* 120% */
What I’ve tried so far:
- Uploaded the Pally font in Webflow and ensured that it’s set as the font-family.
- Applied the CSS code in the Webflow Designer, ensuring that there are no overrides from other classes.
- Used custom code to apply the
-webkit-text-strokeproperties and font-feature settings directly in Webflow, but the stroke is still not appearing as it does in Figma. - Adjusted the text-shadow values, thinking there may be an issue with how the shadow and stroke overlap, but still no success.
My questions:
- Why is the font stroke and text rendering different between Webflow and Figma? Could this be due to Webflow’s handling of font-feature settings or stroke properties?
- Is there a better way to implement -webkit-text-stroke in Webflow or a workaround for applying text strokes that are cross-browser compatible?
- Could there be an issue with how Webflow handles font-family (Pally) or OpenType features like
'ss01'and'liga'? If so, how can I ensure it renders consistently across both platforms?
Any suggestions or insights on how to fix this issue would be greatly appreciated!