How can I change the heading font in an image banner using custom CSS?

Store Design
, ,
1

I’m trying to change the heading font inside an Image Banner using the custom CSS area of the section.

I’m trying to change the heading font to Nunito, which is a built-in font in Shopify.

I’ve added:

h2 {
font-family: nunito !important;
font-size: 65px !important;
}

It changes the font to some type of serif font. What am I doing wrong?

https://4e5f64-2.myshopify.com/

PW: eaniep

2

@JK5000
Hello
Please Add This CSS and Go to Edit Code > Asset > base.css

#Banner-template--19185703092536__image_banner .banner__heading.inline-richtext {
	font-family: sans-serif !important;
	font-size: 60px !important;
}

Like This

oscprofessional_0-1686141459116.png
oscprofessional_0-1686141459116.png1550×934 326 KB

3

Hi @oscprofessional

In your screenshot, it’s not displaying Nunito?

4

Thanks for the reply, @osamafarooqi71

By using the custom CSS area in the section properties?

Where do I find the URL of the font?

5

Great, thanks @osamafarooqi71
Where do I find the URL of a font within Shopify?

6

Hi @JK5000 ,

Follow these steps.

Go to Online Store → Themes → Actions → Edit code.

Go to Assets → base.css file → add this code to the bottom of the page.

#shopify-section-template--19185703092536__image_banner h2 {
    font-size: 60px !important;
    font-family: 'Nunito Sans' !important;
}

Like these

websensepro_0-1686227541910.png
websensepro_0-1686227541910.png1092×508 462 KB

If it works for you, don’t forget to Like it and Mark it as a Solution.

7

Hi @oscprofessional , I want to also change the font style in my image banner on my home page (https://shopkidsplaysets.com/). Should I copy this same code, and just substitute the font style name? Thank you!