Custom Font not working

Store Design
,
1

Hi I am trying to add a custom font on the website. I followed these steps,

  1. Uploaded the font file in the assets folder (woff2)

  2. Added the following to the base.css:

@font-face {
font-family: ‘TAN Headline’;
src: url(‘{{ ‘TAN - HEADLINE.woff2’ | asset_url }}’) format(‘woff2’),
font-weight: normal;
font-style: normal;
}

h1 {
font-family: ‘TAN Headline’, serif;
}

The custom font does not get displayed on an H1 and instead displays the serif.

2

Hi @timssysss , welcome to the community. Do you have a public link where I could see this in action. That’s the only way to debug.

3

Hi, thanks for the reply,

Since the site is not yet available you can see it from here:
Vitality Meals
Its the coming soon page, but I changed the CSS to apply the custom font for h2 so the Coming Soon heading should have the custom font. I also set it to sans-serif as the secondary font family just to see that the CSS is working and also added !important to the statement.

4

In the inspector you can see the font here, but doesnt work…

timssysss_0-1743958096737.png
timssysss_0-1743958096737.png778×475 30.2 KB

5

The problem is that your .woff2 file never gets rendered. If you search for TAN Headline in this file https://thevitalitymeals.com/cdn/shop/t/3/assets/base.css?v=148700460572455354921743958146 you’ll see that it doesn’t show the URL but the actual Liquid code you used. That’s because .css files do not support Liquid.

You can put your custom font code in theme.liquid and then it’ll start working. Go to theme.liquid file, and right before the </head> tag, add the code snippet i.e.

@font-face {
  font-family: "TAN Headline";
  src:url("{{ 'TAN - HEADLINE.woff2' | asset_url }}") format("woff2"),
  font-weight: normal;
  font-style: normal
}

h2 {
  font-family: "TAN Headline", sans-serif !important
}

That’ll resolve your issue.

Oh, and if you want to apply the font the password page, you’ll have to add it in the password.liquid file as well.

6

Hi, thank you very much for the reply.

I added a snippet with the code I used above in the password.liquid page but it still doesn’t show…