Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Beginner adding custom font to Taiga third party theme

Beginner adding custom font to Taiga third party theme

roblong
Tourist
4 0 0

Hi all,

Does anyone know how to go about adding custom fonts to the Taiga theme? Unfortunately the developer of the theme said that custom fonts are not part of the theme support and they don't offer development services so I'm on my own for this one 😞

I've looked at a few methods on the forum that involve adding font-face code to various different files including theme.scss.liquid or stylesheet.css but this theme doesn't seem to have files with any of those names.

I found a help file about the custom css section which mentioned fonts could be added by putting the code there so I uploaded the fonts to the content/files section and added the below code to the custom css section in the main theme customisation settings but it says that the font url I copied and pasted in from the content/files is invalid and doesn't allow me to save.

 

Here's the code...

 

@font-face {
font-family: "adoreserifregular";
src: url("https://cdn.shopify.com/s/files/1/0715/1999/4176/files/adoreserifregular.woff?v=1675404986") format("[woff]");
}

 

Is there something wrong with the code or is it not suitabel for the custom css section?

Any help will be much appreciated,

Thanks!

Replies 9 (9)

PageFly-Victor
Shopify Partner
7865 1786 3115

Hi

 

This is Victor from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@font-face {
font-family: "adoreserifregular";
src: url("https://cdn.shopify.com/s/files/1/0715/1999/4176/files/adoreserifregular.woff?v=1675404986") format("[woff]");
}
</style>

 

Then you will need to use it with the format below : 

<style>
* {
font-family: "adoreserifregular"; // this is an example, please change the * to your class or element
}
</style>


Hope this can help you solve the issue 

 

Best regards,

Victor | PageFly

roblong
Tourist
4 0 0

Thanks for your reply Victor 🙂

I put the first part of the code into the theme.liquid file and I'm just wondering does the second part just go below? Also when you mention the element/class do you mean things like h1/h2 etc like this...


<style>
@font-face {
font-family: "adoreserifregular";
src: url("https://cdn.shopify.com/s/files/1/0715/1999/4176/files/adoreserifregular.woff?v=1675404986") format("[woff]");
}
@font-face {
font-family: "badinjalregular";
src: url("https://cdn.shopify.com/s/files/1/0715/1999/4176/files/badinjalregular.woff2?v=1675405003") format("[woff2]");
}
</style>

<style>
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, {
font-family: "adoreserifregular";
}
</style>

<style>
p {
font-family: "badinjalregular";
}
</style>

</head>

 

Sorry to be a pain but I'm a complete beginner at this!

 

Cheers

PageFly-Victor
Shopify Partner
7865 1786 3115

@roblong No worries at all. It is my pleasure to help.
Yes just put all your required code inside the <style> </style> and put it above the </head> like that

You are doing that great and in the right direction

roblong
Tourist
4 0 0

Thanks for giving it a shot Victor, unfortunately this theme must work differently to the others  somehow because I can't get the font to change to anything other than a built in shopify font 😞

GemPages
Shopify Partner
5625 1262 1254

Hello @roblong ,

 

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

GemPages_0-1676434486878.png

 

2. Open your theme.liquid file

3. Paste code the below code before </head>

GemPages_1-1676434556257.png

    <style>
      @font-face {
        font-family: "adoreserifregular";
        src: url("https://cdn.shopify.com/s/files/1/0715/1999/4176/files/adoreserifregular.woff?v=1675404986") format("[woff]");
      }
    </style>

4. Paste code the below code before </body>

GemPages_2-1676434590474.png

    </style>
     body, h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5 {
        font-family: "adoreserifregular"; 
    }
    <style>

I hope the above is useful to you.


Kind & Best regards, 
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
roblong
Tourist
4 0 0

Hey guys, I've tried this out as well and it doesn't work unfortunately, I think this Taiga theme must work differently to other themes. Thanks for trying anyway!

PageFly-Victor
Shopify Partner
7865 1786 3115

I'm so sorry to hear that the issue cannot be fixed because of the theme functionality.
Please let me know if you need further help.
Thank you 

KiliW
Visitor
2 0 1

Thanks for your help. Maybe we can still find a solution. I would love to see a fix to this. I have the same issue.

I assume that within the 

 

css-settings-and-variables.liquid

 

are a couple of settings about the header font-family of taiga. I just did not figured out how to set a custom font. 

PromisedGrounds
Visitor
1 0 0

Was this ever solved? I'm having the same issues. Nothing seems to work.