How can I use multiple fonts on my custom theme?

[Mugchic]

Hello,

I currently have a custom theme and it has the same font for the whole website. I’ve downloaded a custom font and loaded it onto the website but it will only allow one font. How can i change the font for different areas e.g. headings font A, descriptions font B? Is there a change in the theme coding i could do?

Appreciate any help you may have! thanks

[dmwwebartisan]

@Mugchic

Please follow the video tutorial below.

How to add a custom font to a Shopify theme 2024

[Transcy]

Hello @Mugchic ,

You can try to follow these steps:

• Go to Online Store → Themes → Actions → Edit code
• Go to Assets → theme.css file or base.css file
• To change the font for headings, look for CSS selectors that target headings. These selectors might be named h1, h2, h3, etc. Adjust the font-family property to the desired font. For example:

h1, h2, h3 {
  font-family: "Font A", sans-serif;
}

• To change the font for descriptions or body text, find the CSS selectors that target paragraph or body text elements. These selectors might be named p, body, or have a class like .description. Adjust the font-family property for these selectors as well. For example:

p, .description {
  font-family: "Font B", sans-serif;
}

• Save and preview

Hope this can help.

Transcy

[Mugchic]

Hi Transcy,

Thank you for your advice, however, I’m still stuck! I’ve added a photo below of what my current code looks like in the ‘theme.css’ file. As you can see, it doesn’t have the ‘font family’ option. should i amend this to the code you provided below?

Also, i’ve added a photo of what my current code looks like in the ‘theme.liquid’, is this correct? Thanks for any advice you may have