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
18 1 33

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

edgywebsites.com
DARING.INNOVATIVE.CUTTING-EDGE.

View solution in original post

Replies 29 (29)

made4Uo
Shopify Partner
3839 716 1177

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
18 1 33

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

edgywebsites.com
DARING.INNOVATIVE.CUTTING-EDGE.
divadminlocal
Tourist
12 0 1

You saved me

Edgywebsites
Shopify Partner
18 1 33

Glad to hear it helped! 🙂 

edgywebsites.com
DARING.INNOVATIVE.CUTTING-EDGE.
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
18 1 33

Glad I was able to help!

edgywebsites.com
DARING.INNOVATIVE.CUTTING-EDGE.
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
18 1 33

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

edgywebsites.com
DARING.INNOVATIVE.CUTTING-EDGE.
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
18 1 33

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

edgywebsites.com
DARING.INNOVATIVE.CUTTING-EDGE.
maj-rafiki
Visitor
1 0 2

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

Edgywebsites
Shopify Partner
18 1 33

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

edgywebsites.com
DARING.INNOVATIVE.CUTTING-EDGE.
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 2

You are the boss 

Ajay K.
robbiehomex
Shopify Partner
2 0 0

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
18 1 33

Glad I could be of help! 🙂 

edgywebsites.com
DARING.INNOVATIVE.CUTTING-EDGE.
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 0

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
18 1 33

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!

edgywebsites.com
DARING.INNOVATIVE.CUTTING-EDGE.
AnasKunda
Tourist
6 0 6

THANK YOU SO MUCH!!!

 

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

tb1313
Tourist
5 0 1

Thank you so much

DavidEKim
Shopify Partner
392 131 193

@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