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

[HJG]

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

[BSSCommerce-B2B · Accepted solution]

@HJGtry 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 </body>

<style>
  {% if template.name == 'index' %}
    body * {
      font-family: 'Times New Roman', serif!important;
    }
  {% elsif template.name == 'collection' %}
    body * {
      font-family: 'Arial', sans-serif!important;
    }
  {% endif %}
</style>

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

Best Regards 😊

[Sweans]

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.

4. 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