Can I only change the typography of the blog page?

[KimKimKimKim]

Hi, thanks for reading.

I only want to change our homepage's blog's typography.

I think that I need to change the code, but unfortunately, I don't know how.

Is there any good way to fix this?

Our homepage and the post on our blog are:

https://kimspups.com/blogs/blog-5/the-positive-impact-of-living-with-a-dog-emotional-stability

[Asad-Mahmood · Accepted solution]

Go to your online store -> customize -> settings -> custom css and paste this code there

.article--content {
    font-family: sans-serif !important;
}

[Asad-Mahmood]

To change the blog typography on your homepage:

1. Add custom classes:

   • In the relevant section file (section-blog.liquid), add

<h2 class="custom-blog-title">{{ blog.title }}</h2>
<p class="custom-blog-description">{{ blog.content }}</p>
​

Add conditional CSS:

• In your main stylesheet (theme.css.liquid), add:
  
  

{% if template == 'index' %}
  .custom-blog-title {
    font-family: 'Your Font', sans-serif;
    font-size: 24px;
  }
  .custom-blog-description {
    font-family: 'Your Font', sans-serif;
    font-size: 18px;
  }
{% endif %}
​

[KimKimKimKim]

Hi, Asad-Mahmood,

Thanks for your reply. But, I couldn't find how to apply this code. Can you explain how to do it?

[Made4uo-Ribe]

Hi @KimKimKimKim 

Please be more specific; you used 'typography,' which is a broad term. Clarify what you like to change. Thanks!

[KimKimKimKim]

Hi, Made4uo-Ribe,

I want to change our blog's font, which is currently 'Shadows in Light', to Sans Serif.

[Asad-Mahmood · Accepted solution]

Go to your online store -> customize -> settings -> custom css and paste this code there

.article--content {
    font-family: sans-serif !important;
}

[KimKimKimKim]

Thank you!!!

[Made4uo-Ribe · Accepted solution]

Thanks for the info, try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

h1.article--title, .article--content, .article--author {
    font-family: sans-serif !important;
}

• And Save.
• Result:
• 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!