FROM CACHE - en_header

Can't get custom font to work with Dawn theme 6.0.2

Solved
chookz
New Member
3 0 2

I have followed several tutorials and added the following CSS to test with both base.css and then a custom.css file linked to theme.liquid:

 

@font-face {
  font-family: "smokey";
  src: url({{"smokey.woff" | asset_url}}) format("woff"),
    url({{"smokey.woff2" | asset_url}}) format("woff2");
}

 

Both woff & woff2 fonts are uploaded to the assets folder.

 

I then tried to use font on h2 headers with:

 

h2 {
  font-family: "smokey" !important;
}

 

The headers change from a sans serif to a serif font (so they are being targeted) but they do not change to the smokey font.

 

Just wondering if I am doing anything wrong or if this doesn't work with the Dawn 6.0.2 theme.

Cheers!

Accepted Solution (1)

Accepted Solutions
made4Uo
Shopify Partner
1959 345 474

This is an accepted solution.

Hi @chookz,

 

Try this different approach.  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: 'smokey';
src: url(https://samplelink) format('woff2'),
url(https://samplelink) format('woff');
}

 

 

 

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.

View solution in original post

Replies 4 (4)
made4Uo
Shopify Partner
1959 345 474

This is an accepted solution.

Hi @chookz,

 

Try this different approach.  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: 'smokey';
src: url(https://samplelink) format('woff2'),
url(https://samplelink) format('woff');
}

 

 

 

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.
DavidEKim
Shopify Partner
184 46 63

Hi,

Your approach is correct.

However you always need to use fallback font.

Please keep your fonts in assets and upload the fonts to your file folder (Admin > Settings > Files )

Please add the code below to Assets/base.css.

 

@font-face {
  font-family:"smokey";
  src: url("{{ 'smokey.woff' | asset_url }}") format("woff"), 
       url("{{ 'smokey.otf' | asset_url }}") format("opentype");
  font-display:auto; font-style:normal; font-weight:400; font-stretch:normal;
}

@font-face {
  font-family: smokey;
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
  src: url("https://cdn.shopify.com/your-font-file-address/") format("woff2"),
       url("https://cdn.shopify.com/your-font-file-address/") format("woff");
}

/* Don't remove the header font-familty */

h2 {
  font-family: "smokey" !important;
}

 

 

Hope it works and helps.

Thanks.

 

 

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
chookz
New Member
3 0 2

Thank you very much. This worked great. Perhaps just edit your code to put the url sample link in quotation marks for anybody else looking for the same answer. Cheers

chookz
New Member
3 0 2

Thank you very much