I cannot get my font assets to show.
Please help.
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;
}
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.
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.
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_77 is aware of this bug, I believe that’s the only solution.
Good luck!
Edgywebsites
http://www.edgywebsites.com
27 Likes
You saved me
1 Like
Glad to hear it helped! 
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!
1 Like
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!
2 Likes
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!
2 Likes
Glad I was able to help!
1 Like
No problem. I’m glad I was able to help. I was in the same position before I worked out the solution.
1 Like
No worries, that’s what the community is for, helping each other out. 
1 Like
Huge thanks once again, was pulling my hair out there
2 Likes
No problem. Glad the solution is proving to be popular and helping so many people.
You are a legend!
1 Like
Thanks a lot, spent 3 hours on this.
1 Like
thank you!!!
1 Like
You are the boss
1 Like
aww mate, cheers for the save 
Was getting annoyed with it for ages there.
Cheers
1 Like