How can I add a custom font to my site using the Ride theme?

[aidanlee]

Hey all,

I am trying to add a Custom Font to our site (Bank Gothic).

I have tried the methods outlined here - https://shopify.dev/themes/architecture/settings/fonts#custom-fonts but haven't been able to do so.

Shopify support weren't sure on the answer too.

I followed the tutorial above, and another one here - https://ecomexperts.io/blogs/liquid-tutorial-shopify/shopify-font but I am unable to find the theme.scss.liquid. area, so instead, I tried pasting the relevant code into the theme-editor.js area which I believe is wrong.

For reference I am using the Ride theme.

Please assist with this in anyway you can.

Thank you,
Aidan

[oscprofessional]

@aidanlee ,

Refer this link..

https://www.oscprofessionals.com/shopify/how-to-add-and-edit-a-custom-fonts-to-your-shopify-store/

[aidanlee]

@oscprofessional - thank you although in the Ride theme I don't have the theme.scss.liquid available. Would there be an alternative to use?

Thanks!

[oscprofessional]

@aidanlee ,

Try to add in base.css file.

[aidanlee]

@oscprofessional no luck unfortunately.

I've screenshotted what I've done, is that correct?

[Ahsan_ANC]

Hi @aidanlee , this method is not working currently due to some shopify backend security issues. Please follow the steps I mention in the below guide.

How to add custom fonts in Shopify 

[DelightCart]

@aidanlee Please follow up below steps to add custom font.

1. Assets > theme.scss.liquid

2. Paste below code at bottom of file.

 @font-face {
font-family: "NAME OF FONT";
src: url("NAME-OF-FONT-FILE.woff2") format("woff2"),
url("NAME-OF-FONT-FILE.woff") format("woff");
}

Note: Rename the font as you needed.

3. Now, Go to assets folder and click Add a new asset

[aidanlee]

@DelightCart thank you although in the Ride theme I don't have the theme.scss.liquid available. Would there be an alternative to use?

Thanks!

[devtalk]

@aidanlee 

All theme have different File name, Let me know which theme are you using.

Add on css file.
I hope it will work,

[aidanlee]

@devtalk  Thank you. I am using the Ride theme. 

Where would I place it in this case?

Thank you very much!

[gr_trading]

Hi @aidanlee ,

Please follow the below video to add custom fonts in Shopify font settings.