Uploading Custom Fonts

[tierramb]

I really need help uploading two custom free fonts to my website (Trend Sans Five & Telegraf Regular). I have done all of the following:

1 - Uploaded the font as a .woff file in the assets section.

2 -  Pasted the following code at the top of the styles section of the </>theme.liquid part of the website: 

@font-face {font-family: 'TrendSans Five';
src: url('{{ '[TrendSans Five.woff](http://Five.woff)' | asset_url }}') format('woff');
}
@font-face {
font-family: 'TelegrafRegular';
src: url('{{ '[TelegrafRegular.woff](http://Telegraf.woff)' | asset_url }}') format('woff')

3- Previously tried it at the bottom of the base.css section

4-Cleared Browser, Cache, Cookies History 

5- I'm seeing the following error message when I hover over the link: 'assets/[TelegrafRegular.woff](http://TelegrafRegular.woff)' does not exist &

'assets/[TrendSans Five.woff](http://TrendSans Five.woff)' does not exist 

Could someone please assist me with this? 

[Guleria]

Hello @tierramb ,

Try to upload the font under Content ->  Files
Copy the path and update in the css you have 
@font-face {font-family: 'TrendSans Five';
src: url('https://cdn.shopify.com/s/files -your-path') format('woff');
}

[tim]

You can't use Liquid code in .css files.

You can't nest quotation marks or ticks like you do in your code sample (though it's formatted in a way which is hard to understand)

Also, recently I've encountered that uploading font files to Assets damages them, not sure if it's already solved.

Uploading to Files worked. Also, you should be able to avoid theme modifications in this case if you paste your code into Custom liquid section...

You can try using  section by @diego_ezfy (https://ezfycode.com/blog/add-custom-fonts-to-shopify) for this.

if you're doing this inside .liquid file or Custom liquid sections, the code should be like this (if you upload to Files!):
(note how I am using both quotes and ticks to avoid nesting)

<style>
  @font-face {
    font-family: "TrendSans Five";
    src: url("{{ 'TrendSans Five.woff' | file_url }}") format("woff");
  }
  @font-face {
    font-family: "TelegrafRegular";
    src: url("{{ 'TelegrafRegular.woff' | file_url }}") format("woff");
  }
</style>
 

 Also, if you're uploading to Files, you can copy URL for these files and replace {{ 'TrendSans Five.woff' | file_url }} with the actual URL. In this case you can paste rules into Custom CSS (as liquid is not processed there).

[PageFly-Richard]

This is Richard from PageFly - Shopify Page Builder App

Hi @tierramb  you need add code inside tag <style> if you want use this code in theme.liquid:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

<style>
@font-face {font-family: 'TrendSans Five';
src: url('{{ '[TrendSans Five.woff](http://Five.woff)' | asset_url }}') format('woff');
}
@font-face {
font-family: 'TelegrafRegular';
src: url('{{ '[TelegrafRegular.woff](http://Telegraf.woff)' | asset_url }}') format('woff')
</style>

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly