In Webflow, how can I select and change letters or groups of text to use alternative styles within my purchased font family?
TL;DR
- Upload separate font files for each stylistic variant and apply them using span classes in Webflow.
- Alternatively, use custom CSS with font-feature-settings to enable OpenType features like stylistic sets.
To apply alternative styles (like stylistic sets or alternates) from your purchased font family in Webflow, you’ll need to ensure the font includes those OpenType features and manually manage how they’re applied.
1. Confirm Your Font Includes OpenType Features
- Check your font documentation to ensure it supports stylistic alternates, ligatures, or stylistic sets (ss01, ss02, etc.).
- Most professional fonts from foundries like Adobe, Dalton Maag, or Google Fonts (variable ones) will list OpenType features.
2. Upload the Right Font Variants to Webflow
- Go to Project Settings > Fonts.
- Upload each variation of the font family if stylistic variants are provided as separate files (e.g., "MyFont-Regular", "MyFont-Stylized").
- Webflow does not support individual OpenType features via CSS from a single font file, so multiple styles often require multiple font files.
3. Apply Font Variants Using Separate Classes
- For groups of text needing the alternative style, use a Webflow Span:
- Highlight the text, click the paintbrush icon (Style), and choose Wrap with Span.
- Give the span a class name (e.g.,
.alt-style). - Apply the alternative font variant to that class under Typography > Font.
- Optionally, adjust letter-spacing, font-style, or uppercase to make the text appear different if actual alternates aren’t loading.
4. Use Custom Code for OpenType Features (Optional)
If your font includes OpenType features within a single file, and you’re confident the browser supports them:
- Add custom CSS rules in the Page Settings > Custom Code > Head section:
- Example inline rule:
<style>.alt-style { font-feature-settings: "ss01"; }</style> - Use this class in Webflow to apply those alternates.
- Keep in mind:
- Webflow Designer won’t visually reflect this; it only shows in the published site.
- Not all browsers display OpenType features consistently.
5. Publish and Test
- Publish your site to see the changes.
- Test across browsers to ensure your alternate font styles render as intended.
Summary
To use alternate styles from a purchased font in Webflow, either upload separate font files for each variant and style spans accordingly, or use custom CSS for OpenType features like stylistic sets. Webflow doesn’t provide a native interface for OpenType feature toggling, so updates must be done via class styling or code.