Image Banner Text Change

[ellacoker]

Hello,

I have imported a new font into my base.css code. I am trying to find the class name of my image banner header so that I can target it for the font change. I thought it was .banner__heading but nothing seems to be happening. To be clear, I am trying to target the text "NAMASTE YOGIS"

Thank you.

URL: https://www.livwithin.com.au/

[tim]

Click "Console" in your Developer tools and you will see "Failed to decode downloaded font: https://www.livwithin.com.au/cdn/shop/t/4/assets/Goldenbook%20Regular%20Font.woff2"

This is a known problem with fonts uploaded to theme Assets. Shopify for unknown reason messes with file contents there which leads to this error.

The solution is to upload to Content=> Files and then either use URL from "copy link" or use "file_url" filter.

[ellacoker]

Hi Tim,

I have just done exactly that, please see screenshots. Very confused as to why its still not working.

[ellacoker]

Nevermind! I fixed it. Would you be able to help me to find the class of my home page image banner header? I am trying to target only this for my new font. Its "Namaste Yogis"

[tim]

But it did work for h3 --  right?

The reason it's not working because you're using h2 as selector.

Your element:

<h2 class="banner__heading inline-richtext h0">NAMASTE YOGIS</h2>

base.css

/* theme own CSS  */
h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--font-heading-family);
}
 ...
/* your CSS */
h2 {
  font-family: 'Goldenbook';
}

Theme CSS wins here, because it applies via .h0 selector and class-based selector is stronger then tag based.

 So you could use one of:

/* use important */
h2 {
  font-family: 'Goldenbook' !important;
}

/* or use same strength, but occurs later in file -- wins */
.h0 {
  font-family: 'Goldenbook';
}
/* or use your inital rule -- select by class  */
.banner__heading {
  font-family: 'Goldenbook';
}

/* or combine both -- a little bit stronger */
h2.h0 {
  font-family: 'Goldenbook';
}
/* or */
h2.banner__heading {
  font-family: 'Goldenbook';
} 

[tim · Accepted solution]

Also, I am not a big fan of  CSS code like this added to your stylesheet assets:

#shopify-section-template--19130582892786__image_banner_DgVHmq h2 {
  font-family: 'Goldenbook'
}

This uses selector which is tied to the section id. If you re-create the section or duplicate theme, section id will/may change and this rule will no longer apply.

I'd rather add the rule to the "Custom CSS" setting of this section:

h2 {
  font-family: 'Goldenbook';
}

When you use "Custom CSS" section setting Shopify prepends section id selector to yours automatically, so it will automatically become the same as the first code snippet.

This way it becomes:

a) stronger selector and will override most of other CSS rules;

b) would only apply inside this section;

c) portable -- section ID will be automatically amended if needed.

Added benefit -- no theme code edits -- allows to automatic theme updates. Editing theme code will make theme updates very difficult.

[ellacoker]

Oh very true. Thanks I have just applied to the sections speicifcally.