Is there an option in Webflow that enables -webkit-font-smoothing: antialiased?

Webflow does not have a built-in toggle for -webkit-font-smoothing: antialiased, but you can apply it using custom CSS. Here's how to do it correctly within Webflow.

1. Understand What -webkit-font-smoothing Does

• -webkit-font-smoothing is a CSS property that controls the rendering of text on WebKit-based browsers (like Safari and older versions of Chrome).
• Setting it to antialiased can make fonts appear thinner and cleaner, especially on macOS.

2. Add Global Custom CSS in Webflow

• Go to Project Settings.
• Click on the Custom Code tab.
• In the Head Code section, add the following inline CSS:

  <style>body {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}</style>

• Save changes and Publish your site to apply the styling.

3. Apply Font Smoothing to Specific Elements (Optional)

• You can also target headings, paragraphs, or specific classes by adding custom selectors inside the <style> block. For example:

  <style>.my-text-class {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}</style>

• Assign the class my-text-class in the Webflow Designer to the element you want to affect.

4. Use Embed Element in Designer (Per Page Option)

• Add an Embed element anywhere on the page.
• Paste the same <style> tag (as above) inside the embed.
• This will apply the setting only to that page when published.

Summary

While Webflow doesn't offer a built-in setting for -webkit-font-smoothing: antialiased, you can easily add it via custom CSS in Project Settings or using Embed elements to control font rendering.