Shopify themes, liquid, logos, and UX
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
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;
}
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.
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
You saved me
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!
Glad I was able to help!
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!
No problem. I'm glad I was able to help. I was in the same position before I worked out the solution. 🙂
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!
No worries, that's what the community is for, helping each other out. 😉
Huge thanks once again, was pulling my hair out there 🙂
No problem. Glad the solution is proving to be popular and helping so many people.
You are a legend!
Thanks a lot, spent 3 hours on this.
thank you!!!!
You are the boss
aww mate, cheers for the save 😂
Was getting annoyed with it for ages there.
Cheers
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.
Glad I could be of help! 🙂
thanks, got the same issue, now solved
Thank you so much, this really helped since all other solutions were not working!
THANK YOUUUU !!!
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? 🙏🙏
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.
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!
THANK YOU SO MUCH!!!
I spent an hour trying the older solutions from Shopify community. Finally I solved this!!!
Thank you so much
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>
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?
Hey @shopbaileybee ,
Sure, what do you need help with? Can you paste in your code? Thanks
Crazy how this isn't fixed two years later. Spent 3 hours on this before I found your solution.
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.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024