Can I only change the typography of the blog page?

Store Design
1

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

2

To change the blog typography on your homepage:

  1. Add custom classes:

    • In the relevant section file (section-blog.liquid), add
## {{ blog.title }}

{{ blog.content }}

​

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 %}
​
3

Hi @KimKimKimKim

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

4

Hi, Made4uo-Ribe,

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

5

Hi, Asad-Mahmood,

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

6

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

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

AsadMahmood_0-1729457258201.png
AsadMahmood_0-1729457258201.png1439×724 52.9 KB

7

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;
}

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

8

Thank you!!!