Is there an option in Webflow that enables -webkit-font-smoothing: antialiased?
TL;DR
- Add font smoothing by inserting
<style>body {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}</style>in the Project Settings' Head Code section. - For specific elements or per-page control, use class-targeted styles or embed the same CSS using an Embed element in the Designer.
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-smoothingis a CSS property that controls the rendering of text on WebKit-based browsers (like Safari and older versions of Chrome).- Setting it to
antialiasedcan 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-classin 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.
