Custom fonts are working on desktop but not on mobile devices

Store Design
, ,
1

Hello everyone,

I’m using a custom Google font for some sections and headings of my website and it works wonderfully when viewing in desktop but it’s a disaster when the website is opened on mobile. I uploaded the font to my Files under Content as well as adding it to base.css. It’s a .woff2 file.

Any ideas why this is happening?

My website is www.foreverliving.rip

2

Hey @foreverliving ,

It sounds like the custom font isn’t loading properly on mobile, which is often due to the file path, CSS overrides, or missing responsive settings. Make sure you’re using the direct Shopify file URL (from Content > Files) in your @font-face rule, and that the font-family is applied consistently across screen sizes with no conflicting media queries.

If you share the CSS code where the font is implemented (or your base.css snippet), I can help identify the issue more accurately. Let me know!

Best Regard,

Rajat

3

Hey there @foreverliving check out the reply marked as a solution here https://community.shopify.com/c/shopify-design/custom-fonts-working-on-desktop-but-not-mobile/m-p/2537610 I believe it will guide you in sorting the issue out

4

Hi @foreverliving ,

I checked and the font does not work for both desktop and mobile. When checking details, the code you added to base.css file is incorrect because the file does not support liquid code.

You can refer to my previous tutorial, it will help you create custom font

5

Looks like on your desktop you’re seeing the cached font.

Now, in your assets/base.css:

@font-face {
  font-family: 'Reenie Beanie';
  src: url('{{ "ReenieBeanie-Regular.ttf" | asset_url }}') format("truetype");
  font-weight: normal;
  font-style: normal;
}

This would not work for a number of reasons:

  1. Shopify does not process liquid inside .css assets. You’d be better off by adding this to the “Custom liquid” section in your Footer group. Wrap the code with ...
  2. Font files are often corrupted when uploaded to Assets – use Files instead.
@font-face { font-family: MyFont; src: url('https://cdn.shopify.com/s/files/1/0656/5370/2725/files/ReenieBeanie-Regular.woff2?v=1748475834'); }

This does not work because the link leads to nowhere – I am getting 404 when I try to follow it.

6

Hi @foreverliving you cannot add liquid code in css file you must add it in a file that has extension .liquid

you can add in theme.liquid file and upload your font woff and woff2 files in files tab in dashboard and add their url in your code, you can refer to this video guide for how to add a custom font in shopify