How can I change the text font in a Rich Text element in Webflow CMS collections or on a Collections page?
TL;DR
- Create or select a CMS Collection Page and locate the Rich Text Element.
- Add a custom class to the Rich Text Element.
- Use the Style Panel to adjust font family and typography settings.
- Ensure the changes are reflected across different CMS-driven pages.
To change the text font in a Rich Text element within Webflow CMS collections or on a Collections page, follow these steps:
1. Create or Select a CMS Collection Page
- Go to the CMS Collections Panel in the Designer.
- Select or create a new Collection Page where your Rich Text is located.
2. Access the Rich Text Element
- Find the Rich Text Element that you want to modify. If it's not already on the page, you can add a Rich Text block from the Add Panel.
3. Apply a Custom Class
- Add a custom class to the Rich Text Element if it doesn’t already have one. This allows you to style it separately from other Rich Text elements.
4. Customize the Font
- Go to the Style Panel with the Rich Text Element selected.
- Under the Typography section, modify the settings:
- Choose a font family from the dropdown menu to change the font.
- Adjust other typography settings like font size, weight, color, and line height as needed.
5. Use Rich Text Formatting
- For more specific text styling (like only certain parts of the text), ensure your Rich Text field content in the CMS Editor includes HTML tags. This allows the Designer styles to apply different elements like headings, links, and custom HTML.
6. Verify on Other CMS Pages
- Confirm that the font changes appear on other CMS-driven pages by navigating through different collection items.
Summary
To change the font of a Rich Text element in Webflow CMS, ensure your desired Collection Page is open, add a custom class to target that element, and adjust the typography settings accordingly in the Style Panel. This setup will ensure your changes reflect across all instances within that CMS context.
