Question 406519 in Html Question posted in
Some basic documentation can be found here.

Html – Why is my text stroke and font rendering differently in Webflow compared to Figma?

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:

  1. Figma rendering: (https://www.figma.com/design/z5b8iL2GnF99LtPgG2X7w9/Figma?node-id=0-1&t=cBjo6mlNwFYVj7VK-1)

Figma SS

  1. Webflow rendering: (Read-Only | https://preview.webflow.com/preview/font-test-4d984f?utm_medium=preview_link&utm_source=designer&utm_content=font-test-4d984f&preview=b2a9bb1d2f5043c4d0c4abef1d7fa187&workflow=preview)

Webflow SS

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:

  1. Uploaded the Pally font in Webflow and ensured that it’s set as the font-family.
  2. Applied the CSS code in the Webflow Designer, ensuring that there are no overrides from other classes.
  3. Used custom code to apply the -webkit-text-stroke properties and font-feature settings directly in Webflow, but the stroke is still not appearing as it does in Figma.
  4. Adjusted the text-shadow values, thinking there may be an issue with how the shadow and stroke overlap, but still no success.

My questions:

  1. 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?
  2. Is there a better way to implement -webkit-text-stroke in Webflow or a workaround for applying text strokes that are cross-browser compatible?
  3. 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!

Tags:

2

Answers


  1. 0

    It seems that -webkit-text-stroke draws the stroke centered on the edge of the glyph, so a 4px stroke is drawn 2px outside and 2px inside. Whereas Figma is doing what is more useful for a designer, adding the stroke fully outside the glyph. I assume that Figma would be aware that the CSS they produce does not currently work on the web, and that -webkit-text-stroke is still an experimental property. Perhaps Figma is trying to set the direction here, and get the browser makers to follow, so kudos to them for that. Note that the issue has nothing to do with Webflow, it’s web browsers and web standards which are the issue.

    In terms of what you can achieve on the web today, you can layer multiple shadows to get something close to your design.

    enter image description here

    text-shadow:
  3px 3px 1px white,     /* SE */
  -3px 3px 1px white,    /* SW */
  -3px -3px 1px white,   /* NW */
  3px -3px 1px white,    /* NE */
  3px 0 1px white,       /* E */
  0 3px 1px white,       /* S */
  -3px 0 1px white,      /* W */
  0 -3px 1px white,      /* N */
  3px 6px 3px;           /* pink behind */
    Login or Signup to reply.
  2. 0

    As explained by Brett Donald: text-stroke property renders the stroke centered around the the letter-shape. We don’t have an option to control the alignment of the stroke – as we can do in graphic applications like Adobe Illustrator.

    But we can get a similar effect by:

    • applying the paint-order: stroke fill to the stroked text
    • adding a drop-shadow filter
    body {
  background: #ccc;
}

@font-face{
  font-family: Pally;
  font-weight:700;
  src: url("https://cdn.prod.website-files.com/66ddc9942d65d4c963a26174/66ddcaa1a528a79d9b06c7d6_Pally-Bold.ttf")
}


h1 {
  font-family: Pally, sans-serif;
  color: #ff4776;
  text-align: center;
  -webkit-text-stroke-width: 4px;
  -webkit-text-stroke-color: #f8fffd;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  paint-order: stroke fill;
  filter: drop-shadow(0px 3px 0px #ff4776);
}
    <h1>Stories That Last</h1>

    paint-order: stroke fill makes the stroke render behind the text fill.
    As a text-shadow would render between text-fill and stroke we need to replace it with a drop-shadow filter which renders behind both.

    Keep in mind figma doesn’t use native HTML/CSS so you shouldn’t expect to get a CSS that works 1:1 in a webpage.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search