Font code

[Dustin15]

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

[BSS-TekLabs]

- Please follow these steps:

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

[Dustin15]

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]

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.

[Dustin15]

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

[BSSCommerce-TA · 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

2. Then upload your font

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;
}

[Dustin15]

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]

Yes you can change the specific text by using css.

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

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

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

[Dustin15]

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

[BSSCommerce-TA]

You're welcome.