How to change the serif font for aritcles?

Themes
1

Hey everyone,

I was able to change certain fonts on the main casper theme. Therefore I followed the approach via code injection in the header section as mentioned in many palces.

However this apparently doesnt apply to the article itself. I always have the serif font which I dont want.

How can I replace this? Anyone any idea? It seems like this comes from root.css via the --font-serif property.

Thanks everyone!

2

I found the solution, even though I have no idea why

I just add this snippet to the inject part:

<style>
:root { --font-serif: ‘Barlow’ }

3

It sounds like you’ve successfully changed certain fonts on your main Casper theme, but you’re encountering an issue where the main blog post content still appears with a serif font that you don’t want. This could indeed be related to the --font-serif property in your root.css.

To resolve this issue, you may need to specifically target the blog post content area in your CSS and override the font settings there. You can inspect the element in your web browser to find the specific CSS class or ID associated with the blog post content.

Once you have identified the CSS selector for the blog post content, you can add custom CSS to change the font to your desired choice. Here’s an example of what your custom CSS might look like:

cssCopy code

/* Replace 'your-font' with the desired font family */
.blog-post-content {
    font-family: 'your-font', sans-serif !important;
}

Make sure to replace 'your-font' with the actual font you want to use. Additionally, the !important declaration ensures that your custom font choice takes precedence over any other conflicting styles.

After adding this custom CSS, your blog post content should display with the font you’ve specified. Remember to clear your browser cache or perform a hard refresh to see the changes take effect.Here