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

[sodenbach]

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

[PageFly-Richard]

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

[sodenbach]

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!