Shopify Dawn - Different custom font styles, same block?

[TheRitualThief]

Hi folks, 

Quick question - would you know how I can use 2 different versions of a font in the same text style?

ex. I want to say

SOLUTIONS for ENTREPRENEURS

SOLUTIONS & ENTREPRENEURS will be a H2 regular 

and 

for will be H2 Italic. 

Currently accepts only one or the other font and IOD2 overwhelms the IOD in H2. I have a line with <span> but not functioning for some reason.

Actual code in theme.liquid

 <style>
      @font-face {
      font-family: "IOD";
      src: url("https://cdn.shopify.com/s/files/1/0583/6396/9685/files/IOD-Light.woff2?v=1730629750");
       }
      h1, h2, h3, h4, h5, h6, span.marquee-text {
      font-family: "IOD" !important;
      }
       @font-face {
      font-family: "IOD2";
      src: url("https://cdn.shopify.com/s/files/1/0583/6396/9685/files/IOD-LightItalic.woff2?v=1730631378");
       }
      h1, h2, h3, h4, h5, h6, span.marquee-text {
      font-family: "IOD2" !important;
      }
       @font-face {
      font-family: "IOT";
      src: url("https://cdn.shopify.com/s/files/1/0583/6396/9685/files/IOT-Regular.woff2?v=1730629968");
       }
      p, span.marquee-text {
      font-family: "IOT" !important;
      }
      <h2>This is some <span class="different-font">text with a different font</span>.</h2>
    </style>

TIA!!

[DaisyVo]

Hi @TheRitualThief 

Could you please share your Shopify URL?

Best,

Daisy 

[TheRitualThief]

Sure Daisy,

It's theritualthief.com, pass is pass 🙂

[DaisyVo]

Hi @TheRitualThief 

Could you please describe in detail the specific area you want to adjust?

If you're asking in general, for the code you provided, you can add an ID to the specific elements where you want to customize the font, and then create separate CSS for each area.

Example: If you want to customize an <h2> element, modify it by adding an ID

<h2 id="h2-custom-font" >

If the current <h2> has the font "IOD" and you want to change it to "IOD2," add the following CSS:

h2#h2-custom-font{
font-family: IOD2 !important;
}

To add the code, go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUK >Paste the code provided into the Custom CSS section.

I hope this helps

Best, 

Tiana

[TheRitualThief]

Hi Tiana, 

I want IOD AND IOD2 for to be used in H2. Hope this helps!

Cheers,

Veronica