Custom font not loading mobile

Store Design
,

Topic summary

A custom font (RetroPodcast) displays correctly on desktop and Shopify preview but fails to load on mobile devices.

Root Cause:
Shopify doesn’t process Liquid template code in .CSS asset files, so the @font-face declaration with {{ "RetroPodcast.woff2" | asset_url }} isn’t being rendered properly. The font appears on the developer’s laptop because it’s either locally installed or browser-cached.

Recommended Solution:

  1. Remove the @font-face code from assets/base.css
  2. Add a “Custom liquid” section to the Footer Group in the theme customizer
  3. Paste the @font-face code wrapped in <style> tags into this section

Alternative Fix:
If the above doesn’t resolve the issue, upload font files to the Files section instead of Assets, and replace asset_url with file_url in the code. This addresses potential issues with Shopify breaking font files stored in Assets.

The discussion remains open pending confirmation whether the solution worked.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

My font looks great on desktop and on my shopify preview on my laptop but when i use a different device such as my phone, the font doesn’t load. Would anyone be able to help me? Thank you.

PW: ellaella

Screenshot 2025-10-23 at 15.05.00
Screenshot 2025-10-23 at 15.05.00726×1970 60.5 KB

IMG_4702
IMG_47021320×2868 166 KB

2

This usually means that your font is not properly served to your visitors.
You see it on your laptop because it’s either installed there or cached in browser after you’ve researched this font…

You have this in your assets/base.css:

  @font-face {
      font-family: 'RetroPodcast';
      src: url('{{ "RetroPodcast.woff2" | asset_url }}') format('woff2'),
           url('{{ "RetroPodcast.woff" | asset_url }}') format('woff');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
  }

However, Shopify does not process Liquid in your .CSS assets.

You can try this instead – go to Customize and add a “Custom liquid” section to the Footer Group.
Paste this code to the “Custom liquid” input like this (and remove from base.css):

<style>
  @font-face {
      font-family: 'RetroPodcast';
      src: url('{{ "RetroPodcast.woff2" | asset_url }}') format('woff2'),
           url('{{ "RetroPodcast.woff" | asset_url }}') format('woff');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
  }
</style>

And that would be the first step, because Shopify may break font files loaded to Assets.

If still does not work, upload your font files to Files and replace asset_url with file_url in the code above.

3

Thanks for that Tim - I just want to clarify though, what do you mean add it to the footer group? you mean add to bottom of footer.liquid? Or create my own custom.liquid in sections?

4

Yes, like this –

Screenshot 2025-10-24 at 5.19.50 PM
Screenshot 2025-10-24 at 5.19.50 PM366×305 12.1 KB

That’s in my opinion, better than adding code “above </body>” via theme code edit, but very much the same in terms of performance and effect.

Some of the huge benefits are:

  • You can change the name of the section (see the “CL load stylesheet…” in my screenshot to better document what’s done);
  • You can easily turn them on/off without editing;
  • They will transfer without any effort into new theme during version update;
  • You can use any code, html, css, javascript, provided it is correct. (no restriction as “Custom CSS” settings have).
5

Thats great - Let me give that a go. Thanks Tim.

1 Like
6

working! had to replace asset_url with file_url

1 Like
7

Can see it working too!