Trying to add a custom font in shopify but isn't working.

Technical Q&A

Topic summary

A user is attempting to add a custom font (Balava_Demo.woff2) to their Shopify store but cannot see it in the Typography section of Theme settings.

Initial Problem:

  • Font file uploaded but @font-face code in theme.css uses a relative URL path instead of the full CDN URL
  • Code contains a typo (“f ont-style” with space)
  • Font not appearing in theme customization options

Solution Provided:

  1. Upload font file via Shopify Admin > Content > Files
  2. Copy the full CDN URL from uploaded file
  3. Add @font-face declaration to theme.liquid using the complete CDN URL
  4. Apply font to specific elements using CSS selectors (e.g., h1 { font-family: 'Balava', sans-serif; })

Key Technical Detail:
The corrected code requires the full Shopify CDN URL format:
url('https://cdn.shopify.com/s/files/1/[store-id]/files/Balava_Demo.woff2?v=[version]')

The user confirmed the font file was uploaded, and another participant confirmed the solution worked for them. The discussion appears resolved with working code provided.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

The font file is called: Balava_Demo.woff2

I added the code below in “theme.css” under the assets folder because there is no “base.css” section:

@font-face {

font-family: ‘Balava_Demo’;

src: url(‘Balava_Demo.woff2’) format(‘woff2’);

font-style: normal;

}

tagname or .classname or #id{

font-family: Balava_Demo;

}

Can someone please correct what I have done wrong because I can’t see the font when I try and add it in the “Typography” section of “Theme settings”

Thanks

2

Hello @Matthew114 ,

Follow the below Process to Add a Custom Font in Shopify1. Upload the Font File

  • Go to Shopify Admin > Content > Files and upload your .woff2 or .woff font file.
  • Copy the file URL.

  1. Add Font to Theme CSS

    • Open Online Store > Themes > Edit Code.
    • Go to theme.css or base.css inside the Assets folder.
    • Use @font-face to define the font with the uploaded URL.

  2. Apply the Font to Elements

    • Use CSS to apply the font to specific elements (e.g., body, headings, buttons)
2 Likes
3

What code do I use to apply the font to specific elements?

And can I make it specifically Heading 1 only instead of Heading 3 for example?

4

Share your store url
To apply the custom font to specific elements, use CSS.
h1 { font-family: ‘YourFontName’, sans-serif; }

5

https://reliq.shop/

6

that code only?

7

We have checked your code, and the ‘Balava_Demo’ font is not included. Only two fonts are present:

  1. Lora
  2. Helvetica

Which of these two fonts would you like to apply, and where? Please share some screenshots for reference.

8

Thats why I’m asking for help xD

Here’s the code I have thus far. Can you correct it?

Matthew114_0-1740486389407.png
Matthew114_0-1740486389407.png1345×529 39.5 KB

9

The ‘Balava_Demo’ font is not uploaded first you have to upload then add below code in your theme.liquid file

@font-face {
    font-family: 'Balava';
    src: url('https://cdn.shopify.com/s/files/1/0872/7196/4936/files/Balava_Demo.woff2?v=1740485555') format('woff2');
    font-style: normal;
}
h1 {
    font-family: 'Balava', sans-serif;
}
1 Like
10

I have uploaded it

Matthew114_0-1740487132248.png
Matthew114_0-1740487132248.png1861×300 28 KB

11

Thanks, you saved my day