I would like to use 2 different custom fonts on 2 different pages

Technical Q&A
1

Page url 541460-60.myshopify.com

pass: pialaw

I want to use multiple fonts on different pages.

For example Times New Roman on the Home page

and Ariel on the Collection Page.

I am really new to code and have no idea how to go about this. Any help is appreciated, if need you can contact me on discord at: tcwhyte

2

@HJG try this one

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file theme.liquid

Step 3: Add this code before

If it helps you, please like and mark it as the solution.

Best Regards :blush:

1 Like
3

Hi @HJG ,

To make this happen you need to add a small css code in your theme file. for that follow below steps,

From Shopify backend

  1. Online Store → Themes → “…” → Edit Code

  2. In Edit Code → “assets” directory → “theme.css” file.

  3. Open the base.css file and add the following code at the end of the file:

for this, you can upload the fonts in the assets directory as well as in Content → Files

If you upload it in the assets directory then use this code:

@font-face {
  font-family: "Font name";
  src: url("{{ '[font-file-name]' | asset_url }}") format("[font-format]");
}

If you upload it in the Content → Files then use this code:

@font-face {
  font-family: "Font name";
  src: url("{{ '[font-file-name]' | file_url }}") format("[font-format]");
}

replace it with correct name for the things given in .

Now you can style a class name for which you need the custom font.

  1. Save the file and reload your website.

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans