How can I change the default font on the body text of individual blog pages in Webflow?
TL;DR
- Open the Blog Post CMS Template Page and select the body content or wrapper element.
- Assign a unique class, then set your desired font in the Style panel's Typography section to ensure changes apply only to blog pages.
- If using a Rich Text element, apply styling directly or via a custom class, then publish and preview the result.
To change the default font on the body text of individual blog pages in Webflow, you need to update the font style inside the CMS Template Page specifically for blog posts.
1. Open the CMS Template for Blog Posts
- Go to the Pages panel in the left sidebar.
- Under CMS Collection Pages, click on your Blog Post template.
2. Select the Body Element
- Click anywhere on the canvas to select a text element within the blog.
- Use the Navigator panel to locate the Body (All Pages) or a more specific wrapper if available.
- If needed, create a dedicated wrapper
divfor the blog post body content.
3. Apply a Custom Font Style
- With the Body or post content wrapper selected, go to the Style panel.
- Under Typography, change the Font to your desired typeface.
- Make sure this style is not affecting the global body unless that’s intended.
4. Use a Unique Class for the Blog Page
- If other pages also use this class and you want to limit font changes to the blog post only, assign a unique class to the post wrapper (e.g.,
Blog Wrapper). - Update the font under this new class to avoid affecting global styles.
5. Double-Check CMS Content Formatting
- If you’re using a Rich Text element to display the blog body, select it and either:
- Apply your font settings directly, or
- Assign a custom class (e.g.,
blog-rich-text) and style it accordingly.
6. Publish and Preview
- Publish your site, then preview a live blog post to verify that the font change applies only to individual blog pages.
Summary
To change the font on individual blog pages, go to the Blog Post CMS Template, select the body content or wrapper, apply a unique class, and style the Typography settings as needed—making sure not to affect global body text unless intended.