Beginner adding custom font to Taiga third party theme

[roblong]

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!

[PageFly-Victor]

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]

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]

@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]

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]

Hello @roblong ,

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

2. Open your theme.liquid file

3. Paste code the below code before </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>

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

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

[roblong]

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]

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]

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]

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