Headings won't change to a custom font

Headings won't change to a custom font

alicechachka
Shopify Partner
3 0 0

I'm using the Dawn theme. I have 2 custom fonts – one for body and the other one for headings. 

 

The headings font won't change to Nephilm – custom font.

 

How can I resolve this? Please see my code attached.

 

/* Nephilm Regular */
@font-face {
font-family: 'Nephilm';
src: url("https://cdn.shopify.com/s/files/1/0846/8545/5693/files/Nephilm.otf?v=1729712620") format("otf"),
url("https://cdn.shopify.com/s/files/1/0846/8545/5693/files/Nephilm.otf?v=1729712620") format("otf");
}

 

h1, h2, h3, h4, h5, h6 {
font-family: "Nephilm", serif;
}

Replies 2 (2)

Moeed
Shopify Partner
5813 1579 1877

Hey @alicechachka 

 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


tim
Shopify Partner
3852 377 1411

Couple of reasons:

  1. Your font files are not available (could be that your shop is not open yet, then it's normal, should work for you in preview);
  2. Your font assignment CSS rule is of very low priority and theme own rules override it.

You options for 2) are:

Make your rule higher priority, for example by using !important (not recommended):

h1, h2, h3, h4, h5, h6 {
 font-family: "Nephilm", serif !important;
}

Or, override the variable theme uses for its own CSS rules for headings font (better):

body {
  --font-heading-family: "Nephilm", serif;
}

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail [email protected]