Custom fonts load on desktop browser but not on mobile browser

Shopify Discussion
1

I HAVE TRIED EVERYTHING - Please help if there is something I am missing
I have two custom webfonts—Loren Blake Serif (for body/headings) and Loren Blake Script (for H3)—that load perfectly in desktop browsers but always fall back to the system font on iOS and Android Safari/Chrome.

How I’ve installed them:

  1. Uploaded all font files (.woff, .woff2, .ttf) into Assets.

  2. Created a custom-fonts.css.liquid file with @font-face blocks referencing {{ ‘MyFont.woff2’ | asset_url }}, and added font-display: swap;.

  3. Updated :root { --font-body-family: “Loren Blake Serif”, serif; --font-heading-family: “Loren Blake Serif”, serif; } and added fallback rules:

    css

    CopyEdit

    /* Loren Blake Serif – Regular */
    @font-face{
    font-family:“Loren Blake Serif”;
    font-style:normal;
    font-weight:normal;
    font-display:swap;
    src:url(“https://cdn.shopify.com/s/files/1/0740/6691/9639/files/lorenblakescriptregular-webfont.woff2?v=1746450276”) format(“woff2”),
    url(“https://cdn.shopify.com/s/files/1/0740/6691/9639/files/lorenblakeserif-webfont.woff?v=1746450276”) format(“woff”),
    url(“{{ ‘lorenblakeserif-webfont.ttf’ | asset_url }}”) format(“truetype”);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;

    }
    @font-face{
    font-family:‘Loren Blake Script’;
    font-style:normal;
    font-weight:normal;
    font-display:swap;
    src:url(“https://cdn.shopify.com/s/files/1/0740/6691/9639/files/lorenblakescriptregular-webfont.woff?v=1746450276”) format(“woff”),
    url(“https://cdn.shopify.com/s/files/1/0740/6691/9639/files/lorenblakescriptregular-webfont.woff2?v=1746450276”) format(“woff2”),
    url(“{{ ‘lorenblakescriptregular-webfont.ttf’ | asset_url }}”) format(“truetype”);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    }
    /* Make it the theme default */
    :root{
    –font-body-family:‘LorenBlakeSerif’,serif;
    –font-heading-family:‘LorenBlakeSerif’,serif;

  4. Tried scoping it to mobile only with @media screen and (max-width:749px) and even loading via , but mobile still never uses the custom face.

What I’ve ruled out/tried:

  • Renamed .css → .css.liquid so Shopify processes Liquid and asset_url tags.

  • Moved @font-face into theme.liquid .

  • Switched from asset_url to file_url (no difference).

  • Added !important, font-style: normal !important, and font-weight: normal !important.

  • Cleared caches, hard-refreshed, tested on multiple iPhones/Android devices.

Result:
Desktop picks up exactly the custom glyphs (kerning, ligatures, weight), but mobile always falls back. I’ve confirmed the mobile CSS is being applied—just the font files aren’t loading/used.

2

Share the link (preview link or storefront password, if not live) to your page.

Otherwise – this works: https://codepen.io/tairli/pen/PwwvXmN I’ve just removed some lines not needed for test (works for both desktop and mobile – you can try on yours).

And:

yes, liquid would not be processed in assets/*.css, that’s why most themes output @font-face in layout/theme.liquid

yes, Shopify tends to damage font files uploaded to Assets;

yes, as @hcgxgjxgffc mentioned, font-family names must match, and spaces matter;

yes, your desktop may show fonts because your browser cached them, try a different computer/browser;

yes, can only guess without seeing your site.

3

Here is the preview: https://www.theshearingshed.store/

4

Would need a storefront password to see the site. Password page uses different layout, not the same.

I see that you’ve assigned custom font to heading on password page, but there is no relevant @font-face rules

5

Hi Tim I will email to you

6

https://www.theshearingshed.store/

collaborator code: 6820