All things Shopify and commerce
Hi!
I am using two custom fonts that I have uploaded into both my Assets and Files sections on Shopify. For some reason the fonts show up on my own desktop, but not on other devices. I have tried solutions posted on similar questions but none of them are working. My fonts are Sunliner Revival and Urbanist – I believe I have gotten Sunliner (headings) to work from copying code on other similar questions/answers, but I can't get Urbanist (body copy) to work.
My store url is tinyrooaustralia.com.au. Password is 'tinyroo*!'
Could anyone please help with this? Thanks!
Hi,
To fix your font issue, follow these steps:
Verify Formats: Ensure your fonts are uploaded in multiple formats (.woff, .woff2, .ttf, .eot) for browser compatibility.
Correct CSS: Add this code to your theme’s CSS file, updating file names as needed:
@font-face {
font-family: 'Urbanist';
src: url('{{ "urbanist.woff2" | asset_url }}') format('woff2'),
url('{{ "urbanist.woff" | asset_url }}') format('woff');
}
body {
font-family: 'Urbanist', sans-serif;
}
Use Right URLs: If fonts are in the Files section, use their full URLs from the Shopify admin.
Clear Cache: Clear your browser cache and test on other devices.
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
Hi @Anonymous ! 😊
I can see how frustrating it is when your custom fonts work on one device but not on others, it’s a common issue but totally fixable. Let’s break it down and get everything working perfectly for Sunliner Revival and Urbanist on all devices.
Custom fonts can behave oddly due to:
- Check Your Font Files Ensure you’ve uploaded the correct formats. The most browser-compatible formats are:
- Upload Fonts Correctly
- Add @font-face Rules in CSS In your theme’s theme.liquid or base.css, add the following code:
@font-face {
font-family: 'Sunliner Revival';
src: url('{{ "Sunliner-Revival.woff2" | asset_url }}') format('woff2'),
url('{{ "Sunliner-Revival.woff" | asset_url }}') format('woff'),
url('{{ "Sunliner-Revival.ttf" | asset_url }}') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Urbanist';
src: url('{{ "Urbanist-Regular.woff2" | asset_url }}') format('woff2'),
url('{{ "Urbanist-Regular.woff" | asset_url }}') format('woff'),
url('{{ "Urbanist-Regular.ttf" | asset_url }}') format('truetype');
font-weight: normal;
font-style: normal;
}
Replace the file names with the exact names of your font files.
Apply the Fonts Update your CSS to apply these fonts:
h1, h2, h3, h4, h5, h6 {
font-family: 'Sunliner Revival', sans-serif;
}
body {
font-family: 'Urbanist', sans-serif;
}
Clear Cache and Test
Please follow these steps, and let me know if everything now working fine. In case not, I'll have to look at the code and I'd be needing your collaborator code to send you the request.
Cheers!
Shubham | Untechnickle
Helping for free: hello@untechnickle.com
Don't forget to say thanks, it'll make my day - just send me an email!
Get Revize for Free | Let your shoppers edit orders post-purchase | #1 Order Editing + Upsell App
Hi Shubham,
Thanks so much for your detailed reply. I believe I have followed all your steps — I've uploaded both Sunliner and Urbanist in woff, woff2 and ttf to Assets, copied your code and put my exact file names in, however it still doesn't seem to be working, I don't know if I'm doing something wrong! I have also cleared cache and tested again with no luck.
Please feel free to have a look at the code, my collaborator code is 8367. I would appreciate this a lot! Thanks again for your help.
Thanks Shubham, I have just accepted your request.
Working on it 🙂
Helping for free: hello@untechnickle.com
Don't forget to say thanks, it'll make my day - just send me an email!
Get Revize for Free | Let your shoppers edit orders post-purchase | #1 Order Editing + Upsell App
Hey @Anonymous,
Can you please check now? Also, it'd be great if you can share you email so that I can share the code changes I made.
Edit: Allow me a few minutes to make the final changes.
Best,
Shubham | Untechnickle
Helping for free: hello@untechnickle.com
Don't forget to say thanks, it'll make my day - just send me an email!
Get Revize for Free | Let your shoppers edit orders post-purchase | #1 Order Editing + Upsell App
Hi Shubham, I have just checked after clearing cache and the custom fonts are not displaying, instead it shows this one:
Is it possible to fix this? Thank you. My email is rosie@rosastudio.com.au.
Yes, I'm working on it. Will update you soon.
Helping for free: hello@untechnickle.com
Don't forget to say thanks, it'll make my day - just send me an email!
Get Revize for Free | Let your shoppers edit orders post-purchase | #1 Order Editing + Upsell App
Hi @Anonymous I think I found your problem. Your @font-face declarations for Urbanist have only the filenames: "Urbanist-Italic-VariableFont_wght.woff" and "Urbanist-VariableFont_wght.woff2". While your declaration for Sunliner Revival has the full path: "/cdn/shop/files/SunlinerRevival.woff". Everything else seems in order, so I think if you add the full paths to Urbanist, they should start working.
As I checked, your font works on mobile, right? https://prnt.sc/2sQ4ORNNAFu4
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025