How can I change the default font on the body text of individual blog pages in Webflow?
TL;DR
- Open the CMS Blog Template Page in Webflow and select the Body or relevant text element.
- Apply your desired font in the Style panel and use custom classes to limit changes to the blog template only.
To change the default font on the body text of individual blog pages in Webflow, you’ll need to target the CMS Template Page and modify the text styles there.
1. Open the Blog Template Page
- In the Webflow Designer, go to the Pages panel (left side).
- Scroll down to the CMS Collection Pages section.
- Click on your blog collection page, typically named something like Blog Post Template.
2. Select the Body Element
- Click anywhere on the page canvas where body text appears.
- In the Navigator (F), look for the root-level Body element — it’s the base element for all styles on the page.
3. Set the Font Style
- With the Body (All Pages) or Body (Current Page) selected, go to the Style panel (right side).
- Change the Typography > Font to your desired font family.
- This will apply to all text elements that don’t override this with custom styles.
4. Override Styles If Needed
- If specific text elements (e.g., Rich Text inside CMS) still use a different font:
- Select the Rich Text element.
- Update its Typography settings directly—or assign a class to style it.
- Make sure the style is not inherited from a component or global class unless desired.
5. Scope to This Page Only (if needed)
- To scope font changes to only the blog template page, avoid changing global tags (like Body [All Pages]).
- Instead, style individual elements using custom classes specific to the blog layout.
Summary
To change the default font on individual Webflow blog pages, open the CMS Template Page, select the Body or relevant text element, and apply your custom font/style. Use class-based styling to avoid affecting other pages.