Shopify Dawn - Different custom font styles, same block?

Store Design
, , , ,

Topic summary

Goal: Use two different font variants within a single H2 line in Shopify Dawn (e.g., “SOLUTIONS for ENTREPRENEURS” where SOLUTIONS and ENTREPRENEURS are regular, and “for” is italic/different font).

Context: The theme currently applies only one font to H2; setting IOD2 overrides IOD for the entire element. The user tried wrapping the word in a , but it didn’t work. Site and preview access were shared (theritualthief.com, pass “pass”).

Proposed step (so far): Add an ID to the specific H2 and assign a different font via Custom CSS in Theme settings. This would change the entire H2’s font, not a single word.

Latest clarification: The requirement is to mix IOD and IOD2 within the same H2, not switch fonts per-element. The earlier ID/CSS suggestion does not meet this need.

Status: Unresolved. Next needed guidance is how to apply different fonts to only part of the H2 text (e.g., ensuring spans/classes work and both fonts are properly loaded), and why the current approach isn’t functioning.

Summarized with AI on December 15. AI used: gpt-5.
1

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 but not functioning for some reason.

Actual code in theme.liquid

TIA!!

2

Hi @TheRitualThief

Could you please share your Shopify URL?

Best,

Daisy

3

Sure Daisy,

It’s theritualthief.com, pass is pass :slightly_smiling_face:

4

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

element, modify it by adding an ID

##

If the current

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

5

Hi Tiana,

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

Cheers,

Veronica