Change font header

[INFRA]

Hi there,

I would like to change the font of the header  in this section. I've tried below code but it's not working. Is there something else I could try? I've applied this font successfully to other sections on my site.

.image-text-heading-heading_89gPr6 {
  font-family: "Spectral-semibold", serif;
  font-size: 12px;
}

 and this one did not work either

.h2 {
font-family: "Spectral-semibold", serif;
font-size: 12px;
}

website

Password: fbc

Thanks so much!

[Moeed]

Hey @INFRA 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.image-text-heading-heading_89gPr6 * {
    font-family: "Spectral-semibold", serif !important;
    font-size: 30px !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[INFRA]

hi! I applied the code with the * and it worked, now I am trying to get it on a section below 

this one is not giving me any results:

.feature-heading-template--17337916227677__ss_feature_19_NRcfd6 * {
    font-family: "Spectral-MEDIUM", serif !important;
  
}

Appreciate your help 🙂

[rajweb]

<style>
  .image-text-heading-heading_89gPr6 {
    font-family: "Spectral-semibold", serif !important;
    font-size: 12px !important;
  }
</style>

If the CSS isn't applying, try adding the styles inline in the section for debugging purposes:

<h2 class="image-text-heading-heading_89gPr6" style="font-family: 'Spectral-semibold', serif; font-size: 12px;">
  Header Text
</h2>

This ensures the style applies directly to see if it works.

If these steps don't work, let me know

Hey @INFRA ,

Check for Specificity Issues:

The CSS might not be specific enough, and other styles could override it. Try increasing the specificity like this:

.image-text-heading-heading_89gPr6.h2 {
  font-family: "Spectral-semibold", serif !important;
  font-size: 12px !important;
}

The !important ensures your styles override any others.

2. Confirm the Correct Class Names

Ensure that the class .image-text-heading_89gpr6  or .h2 is correctly applied to the HTML element you're targeting.

Inspect the element using Developer Tools(right-click -> Inspect) to verify the class name. If Shopify has dynamically generated or changed it, adjust accordingly.

Load the Font Correctly:

Make sure  "Spectural-semiboldis loaded on your site. If it's a Google font, you can add it to your theme using:

<link href="https://fonts.googleapis.com/css2?family=Spectral:wght@600&display=swap" rel="stylesheet">

Or if it's declared in the theme.liquid  or CSS file, verify its correct loading.

Add CSS to the Correct File or Location:

Sometimes Shopify themes have multiple CSS files. Try adding the CSS in your theme.liquid file or the custom CSS section:

[ZestardTech]

Hello @INFRA 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.image-text-heading-heading_89gPr6 h2 {
font-family: "Spectral-semibold", serif!important;
font-size: 12px!important;
}

[Dan-From-Ryviu]

Please add this to Custom CSS of that section instead 

h2 {
font-family: "Spectral-semibold", serif;
font-size: 36px;
}