Re: @font-face not working

Solved

Why isn't my @font-face displaying correctly?

LeviEiko
Shopify Partner
5 0 3

I cannot get my font assets to show.  

Please help.

Screen Shot 2022-07-16 at 1.53.07 PM.png

Accepted Solution (1)
Edgywebsites
Shopify Partner
25 2 35

This is an accepted solution.

I think I've got the solution you're after. What I think has happened is that the latest Shopify web code editor is buggy and uploads the files as text (ASCII) instead of binary, which corrupts the file. So you need to upload it using Shopify Themekit. If you're unaware or don't use Themekit, Simply upload the font files by going to settings > files. Once uploaded, copy the link from the uploaded files and paste the link into your CSS. So it should look like the following: 

@font-face {
    font-family: "webfont";
    src: url('https://cdn.shopify.com/s/files/1/0549/2663/91272/files/webfont.woff2?v=1659775160') format("woff2"),
         url('https://cdn.shopify.com/s/files/1/0549/2663/9172/files/webfont.woff?v=1659775160') format("woff");
}

 

Until @Shopify is aware of this bug, I believe that's the only solution.

Good luck!


Edgywebsites
http://www.edgywebsites.com

If our response solved your query, please like and accept it as the solution.

Edgy Websites · All things Shopify
Contact us for Expert Shopify Support

View solution in original post

Replies 31 (31)

made4Uo
Shopify Partner
3852 717 1200

Hi @LeviEiko,

 

Can you try this code instead? I remove the quotations outside the liquid code.

 

@font-face {
font-family: "Urbanist";
src: url({{"Urbanist-Regular.woff2" | asset_url }}) format("woff2"),
url({{"Urbanist-Regular.ttf" | asset_url }}) format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
LeviEiko
Shopify Partner
5 0 3

Unfortunately, there is a message saying "Failed to decode downloaded font:..."

I have tried three different file sources for the font and I get the same error message.

Edgywebsites
Shopify Partner
25 2 35

This is an accepted solution.

I think I've got the solution you're after. What I think has happened is that the latest Shopify web code editor is buggy and uploads the files as text (ASCII) instead of binary, which corrupts the file. So you need to upload it using Shopify Themekit. If you're unaware or don't use Themekit, Simply upload the font files by going to settings > files. Once uploaded, copy the link from the uploaded files and paste the link into your CSS. So it should look like the following: 

@font-face {
    font-family: "webfont";
    src: url('https://cdn.shopify.com/s/files/1/0549/2663/91272/files/webfont.woff2?v=1659775160') format("woff2"),
         url('https://cdn.shopify.com/s/files/1/0549/2663/9172/files/webfont.woff?v=1659775160') format("woff");
}

 

Until @Shopify is aware of this bug, I believe that's the only solution.

Good luck!


Edgywebsites
http://www.edgywebsites.com

If our response solved your query, please like and accept it as the solution.

Edgy Websites · All things Shopify
Contact us for Expert Shopify Support
divadminlocal
Tourist
12 0 1

You saved me

Edgywebsites
Shopify Partner
25 2 35

Glad to hear it helped! 🙂 

If our response solved your query, please like and accept it as the solution.

Edgy Websites · All things Shopify
Contact us for Expert Shopify Support
RQ__Web_Design_
Shopify Partner
20 1 8

OMG THANK YOU!

 

I just spent over 1h trying to figure out what the hell I was doing wrong and all the time it was just Shopify corrupting my files! *sigh*

 

Thanks again for posting the solution!

Edgywebsites
Shopify Partner
25 2 35

Glad I was able to help!

If our response solved your query, please like and accept it as the solution.

Edgy Websites · All things Shopify
Contact us for Expert Shopify Support
Allison_Foley
Shopify Partner
7 0 4

GAH I was about to pull my hair out. I couldn't fathom why the same code I've used in dozens of other sites was all of a sudden not working. THANK YOU!

Edgywebsites
Shopify Partner
25 2 35

No problem. I'm glad I was able to help. I was in the same position before I worked out the solution. 🙂

If our response solved your query, please like and accept it as the solution.

Edgy Websites · All things Shopify
Contact us for Expert Shopify Support
PaulWilliams
Visitor
2 0 3

You're an absolute star! Not one other 'how to' I've found mentions this, hence none of them work. Thank you for saving what hair I have left!

Edgywebsites
Shopify Partner
25 2 35

No worries, that's what the community is for, helping each other out. 😉 

If our response solved your query, please like and accept it as the solution.

Edgy Websites · All things Shopify
Contact us for Expert Shopify Support
maj-rafiki
Visitor
1 0 2

Huge thanks once again, was pulling my hair out there 🙂

Edgywebsites
Shopify Partner
25 2 35

No problem. Glad the solution is proving to be popular and helping so many people. 

If our response solved your query, please like and accept it as the solution.

Edgy Websites · All things Shopify
Contact us for Expert Shopify Support
ofimile123
Tourist
8 0 2

You are a legend!

YvanHK
Shopify Partner
13 1 1

Thanks a lot, spent 3 hours on this.

LeviEiko
Shopify Partner
5 0 3

thank you!!!!

Ajay2265
Shopify Partner
5 1 3

You are the boss 

Ajay K.
robbiehomex
Shopify Partner
2 0 1

aww mate, cheers for the save 😂
Was getting annoyed with it for ages there.
Cheers

CmdrGabeE
Visitor
1 0 1

UPVOTED + LIKED + THUMBS UP!  Thank you for pointing me to the right direction.

Everything in my code was correct and I couldn't figure out why my fonts weren't working.  I uploaded my woff elsewhere and used that external URL in my src and it worked, FINALLY!!!  Thank you :)!!!

 

EDIT: Shopify should fix their font uploader!  I wasted so much time trying to figure this out!  Thank the gods again for your (@Edgywebsites) post about the "buggy" code editor/uploader.

Edgywebsites
Shopify Partner
25 2 35

Glad I could be of help! 🙂 

If our response solved your query, please like and accept it as the solution.

Edgy Websites · All things Shopify
Contact us for Expert Shopify Support
luke1282
Visitor
1 0 1

thanks, got the same issue, now solved

tina97
Shopify Partner
1 0 1

Thank you so much, this really helped since all other solutions were not working!

pielddemel
Visitor
1 0 1

THANK YOUUUU !!!

jimmac
Visitor
1 0 0

have tried this method but still struggling to fix it 

 

after deleting woff and ttf files and then reuploading all my files via settings 
then updating this code;

@font-face {
  font-family: 'FontColors';
  src: url('{{ 'colors.eot' | asset_url }}');
  src: url('{{ 'colors.eot?#iefix' | asset_url }}') format('embedded-opentype'), url('{{ 'colors.woff' | asset_url }}') format('woff'), url('{{ 'colors.ttf' | asset_url }}') format('truetype'), url('{{ 'colors.svg' | asset_url }}') format('svg');
 

  font-weight: bold;
  font-style: normal;
  font-display: swap;
  
}

to this;

@font-face {
    font-family: 'colors';
    src: url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.eot?v=1673370439');
    src: url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.eot?v=1673370439?#iefix') format('embedded-opentype'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.woff2?v=1673370439') format('woff2'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.woff?v=1673370440') format('woff'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.ttf?v=1673370439') format('truetype'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.svg?v=1673370439#colors') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

  i am still only seeing this font/icons work via safari and mobile - chrome browser on desktop doesn't seem to read the files - any ideas? 🙏🙏

RQ__Web_Design_
Shopify Partner
20 1 8

Hey! I'm not sure if this would help but I always remove the "?=v000000000" bit from my urls for fonts/images/etc and everything works fine, so in your case I would be using this: 

 

 

@font-face {
    font-family: 'colors';
    src: url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.eot');
    src: url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.woff2') format('woff2'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.woff') format('woff'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.ttf') format('truetype'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.svg#colors') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

 

 

 

Other than that I don't see any difference between your CSS and the CSS I usually use, it all looks good.

Let us know if that little tweak helped.

Edgywebsites
Shopify Partner
25 2 35

Try removing https: so that it looks like below and see if it helps.

src: url('//cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.eot?v=1673370439');

The above should solve any CORS issue that sometimes blocks resources from loading. 

Good luck!

If our response solved your query, please like and accept it as the solution.

Edgy Websites · All things Shopify
Contact us for Expert Shopify Support
AnasKunda
Tourist
6 0 7

THANK YOU SO MUCH!!!

 

I spent an hour trying the older solutions from Shopify community. Finally I solved this!!!

tb1313
Tourist
5 0 2

Thank you so much

UPDG
Tourist
9 1 1

OMyGosh! It worked!! Thank you! I've also been fussing around with trying to load the fonts as assets for the last week or so!

I made a minor change to your example, instead of the file URL I used the file name and specified | file_url. See below:

<style>
@font-face {
font-family: "SofachromeRg-Regular";
src: url("{{ 'SofachromeRg-Regular.ttf' | file_url }}") format("truetype"),
url("{{ 'SofachromeRg-Regular.woff' | file_url }}") format("woff"),
url("{{ 'SofachromeRg-Regular.woff2' | file_url }}") format("woff2");
font-style: normal;
font-weight: normal;
}
</style>

shopbaileybee
Excursionist
43 0 12

It has been a couple of years but this isn't working for me. I have tried endlessly through so many community posts to add webfonts to my shop with zero luck. Any chance you could assist?

DavidEKim
Shopify Partner
393 131 199

@LeviEiko 

Please add the code below to your theme.css (or any other theme default css such as base.css & style.css) under Assets.

 

 

/* latin-ext */
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/urbanist/v8/L0xjDF02iFML4hGCyOCpRdycFsGxSrqDyx4vH5mqe8Q.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/urbanist/v8/L0xjDF02iFML4hGCyOCpRdycFsGxSrqDyx4vEZmq.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Urbanist';
  src: url("{{ 'Urbanist-Regular.woff2' | asset_url }}") format("woff2"), 
       url("{{ 'Urbanist-Regular.ttf' | asset_url }}") format("truetype");
  font-display: auto; font-style: normal; font-weight: 400;
}
@font-face {
  font-family: 'Urbanist';
  src: url("{{ 'Urbanist-Italic.woff2' | asset_url }}") format("woff2"), 
       url("{{ 'Urbanist-Italic.ttf' | asset_url }}") format("truetype");
  font-display: auto; font-style: italic; font-weight: 400;
}
@font-face {
  font-family: 'Urbanist';
  src: url("{{ 'Urbanist-Thin.woff2' | asset_url }}") format("woff2"), 
       url("{{ 'Urbanist-Thin.ttf' | asset_url }}") format("truetype");
  font-display: auto; font-style: normal; font-weight: 100;
}
@font-face {
  font-family: 'Urbanist';
  src: url("{{ 'Urbanist-ExtraLight.woff2' | asset_url }}") format("woff2"), 
       url("{{ 'Urbanist-ExtraLight.ttf' | asset_url }}") format("truetype");
  font-display: auto; font-style: normal; font-weight: 200;
}
@font-face {
  font-family: 'Urbanist';
  src: url("{{ 'Urbanist-Light.woff2' | asset_url }}") format("woff2"), 
       url("{{ 'Urbanist-Light.ttf' | asset_url }}") format("truetype");
  font-display: auto; font-style: normal; font-weight: 300;
}
@font-face {
  font-family: 'Urbanist';
  src: url("{{ 'Urbanist-Medium.woff2' | asset_url }}") format("woff2"), 
       url("{{ 'Urbanist-Medium.ttf' | asset_url }}") format("truetype");
  font-display: auto; font-style: normal; font-weight: 500;
}
@font-face {
  font-family: 'Urbanist';
  src: url("{{ 'Urbanist-SemiBold.woff2' | asset_url }}") format("woff2"), 
       url("{{ 'Urbanist-SemiBold.ttf' | asset_url }}") format("truetype");
  font-display: auto; font-style: normal; font-weight: 600;
}
@font-face {
  font-family: 'Urbanist';
  src: url("{{ 'Urbanist-Bold.woff2' | asset_url }}") format("woff2"), 
       url("{{ 'Urbanist-Bold.ttf' | asset_url }}") format("truetype");
  font-display: auto; font-style: normal; font-weight: 700;
}
@font-face {
  font-family: 'Urbanist';
  src: url("{{ 'Urbanist-ExtraBold.woff2' | asset_url }}") format("woff2"), 
       url("{{ 'Urbanist-ExtraBold.ttf' | asset_url }}") format("truetype");
  font-display: auto; font-style: normal; font-weight: 800;
}
@font-face {
  font-family: 'Urbanist';
  src: url("{{ 'Urbanist-Black.woff2' | asset_url }}") format("woff2"), 
       url("{{ 'Urbanist-Black.ttf' | asset_url }}") format("truetype");
  font-display: auto; font-style: normal; font-weight: 900;
}
body, a, p, h1, h2, h3, h4, h5, h6, div, span, button, label {
  font-family: Urbanist, Poppins, sans-serif !important;
}

 

 

 

Hope it works & helps.

Thanks.

 

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner