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

Store Design

Topic summary

Goal: add a custom font (Bank Gothic) to a Shopify store using the Ride theme. Existing tutorials reference theme.scss.liquid, which the Ride theme does not include.

Key attempts and guidance:

  • Initial how-tos (Shopify docs and a blog) suggest adding @font-face in theme.scss.liquid. The requester couldn’t find that file and briefly tried theme-editor.js (likely incorrect).
  • Multiple replies share general guides and recommend uploading font files (WOFF/WOFF2) to Assets and adding @font-face. One suggests using base.css (common in Online Store 2.0 themes like Ride) instead of theme.scss.liquid.
  • The requester tried base.css without success and shared a screenshot (image provided, details not confirmed).

Latest update and differing views:

  • One contributor claims the usual method isn’t working currently due to Shopify backend security changes and provided an alternative guide. Another shared a video tutorial for adding fonts via theme settings.

Status: no confirmed resolution from the requester. Next steps center on trying base.css with uploaded font assets or following the newer guides/videos that address current platform constraints.

Summarized with AI on December 12. AI used: gpt-5.
1

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

1 Like
2

@aidanlee ,

Refer this link..

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

1 Like
3

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

  1. Now, Go to assets folder and click Add a new asset
1 Like
4

@aidanlee

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

Add on css file.
I hope it will work,

1 Like
5

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

Where would I place it in this case?

Thank you very much!

6

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

7

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

8

@aidanlee ,

Try to add in base.css file.

9

@oscprofessional no luck unfortunately.

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

Screenshot 2022-07-27 at 12.35.24.png
Screenshot 2022-07-27 at 12.35.24.png1138×199 34.8 KB

10

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

11

Hi @aidanlee ,

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