Font code

Solved

Font code

Dustin15
Tourist
7 0 1

Good day, I have been trying to add a new font for a specific text using code all day, but unfortunately, I haven't been successful. Therefore, I'm trying to ask you if there's a kind person who could help me, please? I'm using a third-party theme, so there are some minor issues, such as not being able to change the font in the settings, which is why I'm trying to do it with code. Before I want to change the font to 'horizont,' do I need to add this font to Shopify? And then write new code? How do I find the code for a specific text in the list? Your advice would really help me, thank you

Accepted Solution (1)

BSSCommerce-TA
Shopify Partner
123 24 24

This is an accepted solution.

Hi @Dustin15 , you can import your font and use it for specific text by doing this:
1. Open your shopify admin => Go to the file Content section => Files

BSSCommerceTA_0-1718979677956.png

2. Then upload your font

BSSCommerceTA_1-1718980675880.png

3. Get the file name and extension

4. Then Go to your theme => Edit code 

Use the file name and extension you got to replace the code below

 

<style font>
        @font-face {
          font-family: "Font name";
          src: url("{{ 'Roboto-Black.ttf' | file_url }}");
        }
</style>

 

Then put this code before </head> tag in theme.liquid file.

Then you can use the font by using css. Example:

 

.text {
   font-family: 'Font name' !important;
}

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 9 (9)

BSS-TekLabs
Shopify Partner
608 174 205

- Please follow these steps:

step.png

- Then find the base.css or theme.css or main.css file.

- Then add the following code at the end of the file and press 'Save' to save it.

body {

font-family: horizon !important;

}

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Dustin15
Tourist
7 0 1

Thank you so much for the response. So I need to download the font, add it to Shopify, and then change the code? Will the code change only the specific text I need to change?

Shadab_dev
Shopify Partner
160 5 18

You can download font and save it in asset folder and then include it or directly include cdn links if available over the internet. Please share the name of your theme you are using for your store. Will have a look if I can work it out and share the snippets with you.

If this is helpful, please Like and Accept the solution.
Buy me Coffee, if you feel i was helpful. Definitely a motivation to carry out gutting solutions. Need help with shopify liquid or any project in web dev- Feel free to Email Me

Thanks
Dustin15
Tourist
7 0 1

Thank you for your response. I apologize, I forgot to add the theme name: minimog-3-3-0.

BSSCommerce-TA
Shopify Partner
123 24 24

This is an accepted solution.

Hi @Dustin15 , you can import your font and use it for specific text by doing this:
1. Open your shopify admin => Go to the file Content section => Files

BSSCommerceTA_0-1718979677956.png

2. Then upload your font

BSSCommerceTA_1-1718980675880.png

3. Get the file name and extension

4. Then Go to your theme => Edit code 

Use the file name and extension you got to replace the code below

 

<style font>
        @font-face {
          font-family: "Font name";
          src: url("{{ 'Roboto-Black.ttf' | file_url }}");
        }
</style>

 

Then put this code before </head> tag in theme.liquid file.

Then you can use the font by using css. Example:

 

.text {
   font-family: 'Font name' !important;
}

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Dustin15
Tourist
7 0 1

Thank you for your response. Will this code change the specific text? Or should I add the text I want to change to the code?

BSSCommerce-TA
Shopify Partner
123 24 24

Yes you can change the specific text by using css.

Example: If you want to change font family for specific "font upload" text:

BSSCommerceTA_0-1719193633160.png

Get its class "page-link" and add this css to your code:

 

.page-link {
   font-family: 'Font name' !important;
}

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Dustin15
Tourist
7 0 1

Thank you, your advice solved my problem. Once again, thank you 

BSSCommerce-TA
Shopify Partner
123 24 24

You're welcome.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency