Custom fonts load on desktop browser but not on mobile browser

RSSHED · ‎05-20-2025

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:

Uploaded all font files (.woff, .woff2, .ttf) into Assets.
Created a custom-fonts.css.liquid file with @font-face blocks referencing {{ 'MyFont.woff2' | asset_url }}, and added font-display: swap;.
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=17464...") 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=174645...") format("woff"),
url("https://cdn.shopify.com/s/files/1/0740/6691/9639/files/lorenblakescriptregular-webfont.woff2?v=17464...") 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;
Tried scoping it to mobile only with @media screen and (max-width:749px) and even loading via <link media="…">, 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 <head>.
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.

tim · ‎05-20-2025

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.

If my post is helpful, hit the thumb up button -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

RSSHED · ‎05-21-2025

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

tim · ‎05-22-2025

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

If my post is helpful, hit the thumb up button -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

RSSHED · ‎05-26-2025

Hi Tim I will email to you

RSSHED · ‎05-26-2025

https://www.theshearingshed.store/

collaborator code: 6820

Custom fonts load on desktop browser but not on mobile browser

Custom fonts load on desktop browser but not on mobile browser

Community Blog Articles