Font code

Store Design
, , , ,
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

2
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • 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.
3

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.

4

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
BSSCommerceTA_0-1718979677956.png1365×615 77 KB

  1. Then upload your font

BSSCommerceTA_1-1718980675880.png
BSSCommerceTA_1-1718980675880.png1132×546 54 KB

  1. Get the file name and extension

  2. Then Go to your theme => Edit code

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

Then put this code before tag in theme.liquid file.

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

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

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?

6

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

7

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?

8

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
BSSCommerceTA_0-1719193633160.png1857×987 159 KB

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

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

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

1 Like
10

You’re welcome.