How to change the font of blog title｜Savor Theme

[Sunever]

Hello there，

I’m using the Savor theme. Those who’ve used it know it doesn’t have a built-in blogging option. Someone wrote some blogging code for me, but I can’t find that person anymore, so I need help.

Here are my requirements:

1. I want to customize the font for the blog section, or set it as the default website font.
2. Customize the font size.
3. Make the font format consistent across mobile and desktop.

This is what it looks like on desktop:

This is what it looks like on mobile:

My website：https://sunevertech.com/

Shopify Theme：Savor

[Manoj_j]

Hi @Sunever ,
Go to Online Store → Themes → Savor → Actions → Edit code
Open Assets/theme.css
Add this code in the bottom

/* Blog Fonts & Typography */
.blog-section {
  font-family: "Poppins", sans-serif; /* Change to your site font */
  color: #222; /* Default text color */
  line-height: 1.6;
}

/* Blog Title */
.blog-section .section-header__title {
  font-family: "Poppins", sans-serif; 
  font-size: 2.2rem; /* Desktop */
  font-weight: 700;
  color: #0e1b4d;
  margin-bottom: 15px;
}

/* Blog Subheading */
.blog-section .section-header__subheading {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #444;
  margin: 0 auto 20px auto;
  max-width: 600px;
}

/* Blog Card Title */
.blog-section .blog-card__title a {
  font-family: "Poppins", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #222;
}

/* Blog Card Meta (date & author) */
.blog-section .blog-card__meta {
  font-family: "Poppins", sans-serif;
  font-size: 0.9rem;
  color: #777;
}

/* Blog Card "Read More" Link */
.blog-section .blog-card__read-more {
  font-family: "Poppins", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: #007bff;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .blog-section .section-header__title {
    font-size: 1.8rem;
  }
  .blog-section .section-header__subheading {
    font-size: 0.95rem;
  }
  .blog-section .blog-card__title a {
    font-size: 1.1rem;
  }
  .blog-section p {
    font-size: 0.95rem;
  }
}

Save and refresh Preview

Thanks
Manoj

[AiTrillion]

Hello @Sunever ,

I hope you are well!

Copy and paste the below code to base.css or theme.css

 (max-width: 768px) {

.section-header__title {

font-size: 2.5rem !important;

}

}

This will fix the size of both default font. The font is already there but !important attribute will overwrite the mobile CSS and will make both the font size same.

[Sunever]

Hello @AiTrillion,

I pasted the code you provided into my base.css code, but unfortunately it doesn’t work

[Sunever]

Hi @Manoj_j

I couldn’t find the theme.css code in the background, so I pasted it into my base.css code, but unfortunately it didn’t work

[devcoders]

Hello @Sunever

Did this issue get resolved for you?

[Sunever]

Hi @devcoders,

The problem has not been solved yet, the code they gave does not work

[Bang_T]

Hi @Sunever

Add this code to Custom CSS of this section

@media (max-width: 768px) {
    .section-header__title {
        font-size: 2rem !important;
    }
}

Hope it help

[Sunever]

Hi @Bang_T,

Thank you for your reply. Your code is very effective, but I found another problem. The font of this section seems inconsistent with the font of my website, and their compactness is also inconsistent.

[Bang_T]

change to this

@media (max-width: 768px) {
    .blog-section .section-header__title {
        font-size: 2rem !important;
    }
}

[Sunever]

Hello @Bang_T ,

I want to adjust the height here, do you know how to set it? (Still my blog section)

[Bang_T]

you can add this css

@media (max-width: 768px) {
    .blog-section {
        padding-top : 30px;
    }
	.blog-section .section-header{
		margin-bottom: 30px;
	}
}

[Sunever]

You really helped me a lot.

[Bang_T]

Happy to help @Sunever

[Sunever]

hello @Bang_T,

I wonder if you can help me see how to modify the extra space in this position. This is my FAQ page. This position has a large blank space whether it is on the mobile terminal or the PC terminal.

This is really giving me a headache. I wonder if you know how to adjust it.

URL：https://sunevertech.com/pages/faq

[Bang_T]

Hi @Sunever

You should change the Height setting in the FAQ block to Auto

[NSShoreham]

Hi @Sunever How/where did you get the code for blog? Just finished editing a new theme and the last job was to add my two blogs only to find that there are no blog section to add. Most frustrating!

Thanks