How can I change the default font on the body text of individual blog pages in Webflow?

To change the default font on the body text of individual blog pages in Webflow, you’ll need to update the typography styles on the CMS template page used for your blog posts.

1. Go to the Blog Post Template Page

• Open your project in Webflow’s Designer.
• In the Pages panel (upper left menu), scroll to the CMS Collection Pages section.
• Click on the template named something like Blog Post (this is the template page used for individual posts).

2. Select the Body Element

• On the Blog Post template, click on a blank area of the canvas (not on any specific element) until the Body (Body 1) element is selected in the Selector field.
• If the Body element is hard to select directly, use the Navigator panel to manually select the top-level Body of the page.

3. Create a New Style for Blog Post Body

• Once the Body is selected, assign a unique class, e.g., blog-post-body, by typing it into the selector field.
• This ensures your styles apply only to blog posts and not to other pages that use the default Body.

4. Update Typography Settings

• With blog-post-body still selected, go to the Style panel.
• Under the Typography section, update the Font, Size, Line Height, or any other text attributes you prefer.
• These settings will cascade down to all text elements on the blog post unless overridden by more specific styles.

5. Override Specific Text Elements (Optional)

• If your blog posts contain Rich Text elements, you can style those separately:
• Click on the Rich Text element.
• In the Selector field, create and assign a class like blog-rich-text.
• Adjust the typography settings here as well to match your preferred font.

Summary

To change the default font on individual blog pages, assign a custom class to the Body or Rich Text element on the Blog Post template page, then update the typography in the Style panel. This ensures the font change applies only to blog pages without affecting the rest of your site.