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

[LeviEiko]

I cannot get my font assets to show.  

Please help.

 

[made4Uo]

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;
}

[LeviEiko]

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 · 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

[divadminlocal]

You saved me

[Edgywebsites]

Glad to hear it helped! 🙂 

[RQ__Web_Design_]

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]

Glad I was able to help!

[Allison_Foley]

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]

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

[PaulWilliams]

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]

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

[maj-rafiki]

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

[Edgywebsites]

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

[ofimile123]

You are a legend!

[YvanHK]

Thanks a lot, spent 3 hours on this.

[LeviEiko]

thank you!!!!

[Ajay2265]

You are the boss 

[robbiehomex]

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

[CmdrGabeE]

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]

Glad I could be of help! 🙂 

[luke1282]

thanks, got the same issue, now solved

[tina97]

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

[pielddemel]

THANK YOUUUU !!!

[jimmac]

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_]

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]

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!

[AnasKunda]

THANK YOU SO MUCH!!!

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

[tb1313]

Thank you so much

[UPDG]

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>

[DavidEKim]

@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.