Custom font not working on other devices

[Anonymous]

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!

[sadik_ShopiDevs]

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 😍

[TheUntechnickle]

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.

Why This Happens

Custom fonts can behave oddly due to:

1. Incorrect font file formats: Different browsers support different formats (e.g., .woff, .woff2, .ttf).
2. Improper font-face declaration: If your CSS isn’t set up to handle multiple formats or isn’t linked correctly, the fonts might not load.
3. Cache issues: Sometimes changes don’t reflect on other devices because they are loading an older version of your site.

Steps to Fix the Issue

- Check Your Font Files Ensure you’ve uploaded the correct formats. The most browser-compatible formats are:

• .woff and .woff2 (modern and widely supported)
• .ttf (fallback for older browsers)
• .eot (rarely needed, but handy for Internet Explorer)

- Upload Fonts Correctly

• Assets Folder: Upload your font files here (this is where Shopify expects them).
• Ensure they’re named correctly (e.g., Urbanist-Regular.woff2) for easy reference.

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

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

  • Clear your browser cache and test the site on an incognito window or other devices.

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

[Anonymous]

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.

[Anonymous]

Thanks Shubham, I have just accepted your request. 

[TheUntechnickle]

Working on it 🙂

[TheUntechnickle]

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

[Anonymous]

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. 

[TheUntechnickle]

Yes, I'm working on it. Will update you soon. 

[VladimirS]

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.

[LitExtension]

As I checked, your font works on mobile, right?  https://prnt.sc/2sQ4ORNNAFu4