How to add custom font to overall website without having base.css or theme.css files?

Shopify Discussion

Topic summary

Topic: Adding a custom font to a Shopify theme that lacks base.css/theme.css and theme.scss.liquid.

  • Original issue: After a theme update, the store owner wants to use a custom font not available in Shopify and can’t find base.css or theme.css in Assets.

  • Proposed solution (by a helper): Use CSS via Theme Kit.
    • Prepare web font files (WOFF/WOFF2) and host them (self-host/CDN).
    • Add an @font-face rule in theme.scss.liquid referencing the hosted files.
    • Upload font files to assets/fonts and push changes via Theme Kit.
    • A code snippet was provided; it is central to the approach.

  • Constraint raised: The store owner does not have theme.scss.liquid in the current theme and requests an alternative method that doesn’t rely on that file.

  • Status: Unresolved/ongoing. Key next step is identifying a method to add @font-face and apply the font without theme.scss.liquid (e.g., another CSS entry point), but no alternative was provided in the thread yet.

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

Hey!

I just had to update my website theme and need to change the font to a custom font that Shopify doesn’t provide. I’ve looked at past questions and solutions but they all involve having the base.css or theme.css file in the assets folder which I don’t have.

If anyone could help me solve this problem, that would be great!

Website: www.tms.racing

2

Hi,

This is Richard at PageFly - Shopify Advanced Page Builder app.

While Shopify doesn’t have a direct option to upload custom fonts to its theme editor, there are a few workarounds to achieve this. The key is to use CSS to link your custom font file to your theme.

Here’s a step-by-step guide:

1. Prepare Your Custom Font:

  • Font Format: Ensure your font is in a web-friendly format like WOFF or WOFF2.
  • Host the Font: You can host the font file on your own server or use a CDN like Google Fonts or Cloudflare Fonts.

2. Add the Font to Your Theme:

Method 1: Using a Theme Kit:

  1. Install Theme Kit: Follow the instructions to install Theme Kit on your local machine.

  2. Clone Your Theme: Clone your Shopify theme to your local machine using Theme Kit.

  3. Edit the Theme:

    • Open the theme.scss.liquid file.
    • Add the following CSS code to define the font family:
      CSS
    @font-face {
    font-family: 'MyCustomFont';
    src: url('/assets/fonts/MyCustomFont.woff2') format('woff2'),
         url('/assets/fonts/MyCustomFont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

    Hãy thận trọng khi sử dụng các đoạn mã.

    • Replace MyCustomFont with your font’s name and adjust the file paths accordingly.

  4. Upload the Font File:

    • Create an assets/fonts folder in your theme’s directory.
    • Place your font file (e.g., MyCustomFont.woff2) in this folder.

  5. Push the Changes: Use Theme Kit to push the changes to your Shopify store.

Hoping my solution helps you solve your problem.

Best regards,

Richard | PageFly

3

Hi Richard!

Thank you for your response! Do you have another method I can use that doesn’t involve the theme.scss.liquid file, because I don’t have it on this theme?

Thank you!