How to add multiple custom fonts to Shopify? Reformation Theme

[Shay20241]

Hello community,

I am trying to upload custom fonts for both Headings and body text, I followed this instruction but I seem to only be able to change one font. https://documentation.fuelthemes.net/kb/how-do-i-add-custom-fonts-to-reformation-theme/#:~:text=Shopify%2C%20by%20default%2C%20has%20support,to%20snippets/head%2Dvariables.

How can edit the code to change both of them?

[shahrozbabar5]

Hi @Shay20241 ,

Here’s a shorter and easier way to add custom fonts to your Shopify store:

1. Upload the Font

• Go to Online Store > Themes > Actions > Edit code.
• In the Assets folder, click Add a new asset and upload your font files (.woff or .woff2).

2. Add Font to CSS

• Open your main CSS file (e.g., theme.css.liquid).
• Add this code at the top to define your font:

@font-face {
font-family: 'CustomFont';
src: url('{{ "your-font.woff2" | asset_url }}') format('woff2');
}

Replace 'CustomFont' with your font name, and "your-font.woff2" with your file name.

3. Apply the Font

• In the same CSS file, add this code to apply the font:

h1, h2, h3, h4, h5, h6 {
font-family: 'CustomFont', sans-serif;
}

body {
font-family: 'CustomFont', sans-serif;
}

4. Save and Test

• Save your changes and check your store to see the new fonts applied.

That’s it! Your custom font should now be applied to headings and body text.

or I can add custom fonts to your theme for each of the text styles including headings, body, pan, and HTML, YOU CAN CUSTOMISE ANYTIME, dm TO GET IT DONE.

[TheRitualThief]

Hey Shah,

Thanks so much for answering this, worked like a charm. 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 solutions.
TIA!!