How can I change the text font in a Rich Text element in Webflow CMS collections or on a Collections page?
TL;DR
- Select the Rich Text element, assign a class, and style it using the Style panel.
- Use nested styling to customize specific elements (headings, paragraphs, links).
- Apply custom CSS in Page Settings or an Embed element for more control.
- Remove inline formatting in the Webflow CMS Editor if styles aren't applying correctly.
To change the text font in a Rich Text element for Webflow CMS collections or on a Collection page, follow these steps:
1. Use the Rich Text Element's Class
- Select the Rich Text element inside your CMS Collection page or anywhere it's used.
- Add a class in the Webflow Style panel if it doesn’t have one.
- Adjust the text styles, such as font family, size, and line height.
2. Use Rich Text Nested Styling
- Double-click the Rich Text element to edit styles for specific elements inside it (headings, paragraphs, links, etc.).
- Select the element type you want to style (e.g., H1, H2, paragraph).
- Apply the font and other styles as needed.
3. Use Custom CSS for More Control
- If you need global styling for all Rich Text elements, go to Page Settings > Custom Code and add:
<style> .your-class-name p { font-family: 'Your Font', sans-serif; } </style>- For CMS-specific styles, apply classes inside the Webflow Embed element and insert CSS inside Project Settings > Custom Code.
4. Ensure Typography Settings Work with CMS Content
- Webflow may override some styles if inline styling is applied inside the CMS Rich Text field.
- If your font doesn’t apply, remove inline formatting (bold, colors) from the Webflow CMS Editor.
Summary
To change the font in a Rich Text element, apply a class and style it using the Style panel. For deeper customization, use nested styles or custom CSS in Webflow’s settings. Check for inline styles in CMS content that might override your changes.