FROM CACHE - en_header

Custom Font Not Working

sbar
Explorer
50 0 18

Hi!! I have uploaded DOZENS of fonts but am super stuck on this one. I can't tell if it's MY error or if it's an error in the font file — I've redownloaded the font file from different sites, re-converted to woff/woff2, etc. But nothing is working! Any suggestions? Below is the code I've popped into my CSS (as usual) and along with this, I've added the font files under "Assets" on the theme. 

 

@font-face {
font-family: 'CatchyMager';
src: url({{' CatchyMager-Normal.woff2' | asset_url }}) format('woff2'),
url({{'CatchyMagg.woff' | asset_url }}) format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

 

h1, .h1-style, h2, h3, h4, h5, h6, .heading-font {
font-family:"CatchyMager";
font-weight: normal;
font-style:sans-serif;
}

Replies 2 (2)
Kani
Shopify Partner
74 13 19

Hi @sbar

It's hard to know what is the issue without looking into your store.☹️

But please try to edit your css code, add '!important' after font name

h1, .h1-style, h2, h3, h4, h5, h6, .heading-font {
font-family:"CatchyMager"!important;
font-weight: normal;
font-style:sans-serif;
}

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution', let me and other people know this answer solved issues. ♡
It would make me more willing to share my knowledge 🙂
made4Uo
Shopify Partner
1985 352 484

Hi @sbar,

 

You can also try to upload your font this way instead of doing it from the asset folder in your theme.

 

1. In your Admin store, click Settings on your left hand bottom corner

2. Go to Files, then upload your font. 

3. Copy the link when done uploading, and paste it in the font-face. See code below for reference

 

@font-face {
font-family: 'CatchyMager';
src: url(https://samplelink) format('woff2'),
url(https://samplelink) format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

 

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.