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

[Matthew114]

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

[oscprofessional]

Hello @Matthew114 , 

Follow the below Process to Add a Custom Font in Shopify

1. Upload the Font File

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

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

3. Apply the Font to Elements

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

[Matthew114]

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?

[oscprofessional]

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

[Matthew114]

https://reliq.shop/

[oscprofessional]

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.

[Matthew114]

Thats why I'm asking for help xD

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

[oscprofessional]

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;
}

[Matthew114]

I have uploaded it

[Matthew114]

that code only?

[EdenP]

Thanks, you saved my day