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

Solved

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

HJG
Tourist
11 0 3

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

Accepted Solution (1)

BSSCommerce-B2B
Shopify Partner
1954 562 561

This is an 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 😊

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

View solution in original post

Replies 2 (2)

BSSCommerce-B2B
Shopify Partner
1954 562 561

This is an 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 😊

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Sweans
Shopify Partner
420 84 125

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

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com