Decreasing the font size in the title of my Blog post only - Dawn theme

Shopify Discussion

Topic summary

Goal: reduce the oversized blog post title font on Dawn theme pages (only on individual blog posts, not the homepage), without changing global theme settings. Applies to all blog posts; store URL provided (https://shop.vents-us.com/), no password.

Proposed fix: edit theme code via Online Store → Themes → Edit code → base.css. Change the heading font-size from calc(var(–font-heading-scale) * 4rem) to a smaller value (suggested 2rem). Initial guidance referenced line ~309 affecting .h2.

Result: On the site, .h2 was already set to 2rem, so the large title was actually controlled by H1 near line ~304, which was 4rem. Changing H1 to 3rem produced the desired appearance across blog posts.

Outcome: issue resolved with a CSS edit in base.css (reduce H1 font-size from 4rem to 3rem for blog post pages). No further questions or unresolved items noted.

Summarized with AI on December 15. AI used: gpt-5.
1

Hey there.. Looking to reduce the size of the font on my Blog posts titles only, not on the main page but once you have clicked on a Blog and are reading it. Th font size currently is massive, also don’t want to mess with the theme font settings as I have them dialed in.

ss.png
ss.png1748×1296 257 KB

Just need some help with the Blog card font, I’ve tried everything it seems, but nothing has worked specifically for the Blog title description font size.

Thanks!

1 Like
2

Hi @MDPayne

Please share the exact page where you want this to be changed to ?

Thanks

3

Hey there and thanks for your reply. The font decrease code fix should apply to all of my Blog posts, There isn’t just one page or url that it applies to.

4

Hello @MDPayne

Please share your store URL and password.
So that I will check and let you know the exact solution here.

5

Good Day..

The store url is https://shop.vents-us.com/ no password required as we’ve been live for 14 months. Click on any Blog.

Thanks

6

Hi @MDPayne ,

  1. Please go to Online Store → Themes → Click on 3 dots and then click Edit code
  2. Search for base.css
  3. On line no. 309, change 4 rem to 2 rem, this is how it should be:
    font-size: calc(var(–font-heading-scale) * 2rem);

Hope this helps.

7

Hey there..that worked!.. One caveat, On line 309 in my base.css code the rem was already set to 2

.h2 {
font-size: calc(var(–font-heading-scale) * 2rem);
}

However on line 304 above for H1 was not, I changed the 4 rem that was the default to 3 and it looks great.