How can I change the text font in a Rich Text element in Webflow CMS collections or on a Collections page?
TL;DR
- Add a Rich Text element, bind it to your CMS field, and assign it a custom class.
- Open the Rich Text for editing and style individual tags (e.g.
,
) via the Style panel.
- Ensure your desired font is added in Project Settings, and avoid global tag styling to maintain CMS-specific formatting.
To change the text font in a Rich Text element tied to a Webflow CMS Collection, you need to apply custom styling to the Rich Text element or create a specific style guide for CMS-bound content.
1. Use a Rich Text Element Connected to CMS
- Drag a Rich Text block into your Collection Page layout (or static page using a Collection List).
- Bind it to a Rich Text field in your CMS by clicking the blue “Get text from” switch in the Settings panel and selecting your Rich Text field.
2. Add a Class to the Rich Text Element
- Click the Rich Text element and create a new class name (e.g.,
richtext-custom). - This is required to style it independently of default tags like
<p>,<h2>, etc.
3. Style Text Elements Within the Rich Text Block
- With the
richtext-customclass selected, double-click the Rich Text element to open it for styling. - Select a tag inside, such as a paragraph (
<p>), header (<h1>,<h2>), or link (<a>). - Use the Style panel to apply your desired font, font size, line height, color, etc.
- These styles will apply to that specific tag only within Rich Text elements that use the same class.
4. Ensure Font is Available in Project
- If using a custom or Google Font, make sure it's added under Project Settings > Fonts.
- Webflow loads Google Fonts automatically, but you need to upload or link any custom fonts.
5. Optional: Use a Style Guide Page
- Create a "Style Guide" page and place a Rich Text element with various content.
- Apply your Rich Text class and style each tag as needed.
- This page serves as a visual reference and ensures consistent Rich Text styling across pages.
6. Avoid Styling Tags Globally Unless Intended
- Do not globally style paragraph (
<p>), heading (<h2>), or list item (<li>) tags unless you want to affect every instance sitewide. - Always apply and use Rich Text-specific classes for CMS content styling.
Summary
To change the font in a Rich Text element from a CMS Collection, add a custom class to the Rich Text block, open it for editing, and style each tag within it using the Style panel. This ensures consistent and isolated formatting for CMS-driven content.