I have upload thesans font to my theme assets and it’s working fine with desktop browser
but it’s not working with the mobile browser
please if you can any one help me in this
the website url is :
Topic summary
A Shopify store owner uploaded TheSans Arabic font files to their theme assets. The font displays correctly on desktop browsers but fails to render on mobile devices.
Root Cause Identified:
The issue stems from using Liquid template code ({{ ‘TheSans.eot’ | asset_url }}) inside a .css file (assets/base.css). CSS files don’t process Liquid code, so the font URLs aren’t being generated properly. Desktop appears to work due to cached or locally installed font versions.
Recommended Solution:
- Remove the @font-face rules from assets/base.css
- Add a “Custom liquid” section to the Header group in the theme customizer
- Wrap the @font-face CSS code with tags in this liquid section
- This approach avoids editing core theme files and preserves auto-update capability
Alternative Fix:
If font files were corrupted during upload to theme assets, re-upload them to Content → Files and use file_url filter instead of asset_url in the code.
The discussion remains open as the user requested step-by-step guidance due to limited programming experience.
It’s an easy one – you’re editing assets/base.css and trying to use liquid code like {{ ‘TheSans.eot’ | asset_url }}, but the problem is – .css assets do not process liquid code.
When you’re looking at the site on your desktop it most likely uses cached copies of the font – you’ve probably researched the font before or even installed on your computer…
What you need to do, is to move these font-face rules into liquid file, for example into layouts/theme.liquid, or can add in a “Custom liquid” section added to header of footer groups. I strongly recommend the latter because editing theme code will make your theme updates more complex and prevent autoupdates.
I am sorry could you explain to me more , and give me step by step guide, because I am not programmer
thank you for sharing this details with me
1 Like
Sure, no problem.
- Open your assets/base.css and remove the code you’ve added earlier:
/* Font-face for TheSans */
@font-face {
font-family: 'TheSans';
src: url({{ 'TheSans.eot' | asset_url }}) format('embedded-opentype'),
url({{ 'TheSans.woff2' | asset_url }}) format('woff2'),
url({{ 'TheSans.woff' | asset_url }}) format('woff'),
url({{ 'TheSans.ttf' | asset_url }}) format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
- Save and go Customize your theme. Add a “Custom liquid” section in “Header” section group. Paste the code form above, but wrap it with … tags.
If this does not work, it is possible that your font files were corrupted when uploaded to theme Assets. In this case, you’d need to upload your fonts into Content-> Files area of your admin and use this code instead:
See the … tags in this code snippet? And that asset_url were replaced with file_url?