Custom fonts applied via section-level “Custom CSS” appear on desktop but not on mobile. Root cause: the fonts weren’t hosted/loaded; desktop likely showed them because the fonts were installed/cached locally, while mobile couldn’t fetch them.
Key behavior: “Custom CSS” in sections is scoped to that section and can’t include Liquid. Declaring fonts with @font-face is required so browsers know where to download them. Without @font-face, mobile won’t render the custom fonts.
Recommended steps:
Host fonts: upload to Shopify Files or theme Assets, or use Google/Shopify Font Library.
Declare @font-face pointing to those files. If using Files, generate URLs with Liquid in a “Custom liquid” section/block; if using Assets, you can place @font-face in Theme Settings → Custom CSS.
Then target specific elements per section with font-family in the section’s Custom CSS (preserves granular control).
Clarifications: Adding @font-face alone won’t change styles globally unless you reuse an existing font-family name. Once files are reachable, fonts will work across devices.
Status: Guidance provided; the user will DM store details for diagnostics. Resolution pending implementation of @font-face and hosting steps.
Summarized with AI on December 31.
AI used: gpt-5.
I have some custom fonts that I have used throughout my store using the custom CSS box in the sections I want to change only. I have not installed the font files, nor have I done any code editing. Some fonts are working on desktop, but on mobile, they don’t seem to work. For example, 2 on my home page in different sections using the custom CSS box.
Please forgive me if I am asking the question wrong, but I am hopeful someone will understand.
If I want to use custom fonts in certain sections only, using the custom CSS box, do the font files need to be uploaded and edit the code as well?
It’s hard to be specific without seeing your site and even just your code, but yes, if you want to use a custom fonts you’d need to make font files available to your visitor, either by uploading them to your theme assets and adding relevant @font-face rules or by using Google fonts, etc.
When you add css code to “Custom CSS” setting in your sections, these are modified to apply to this section only, say:
p { color: red; }
is output by shopify like:
#shopify-section-template--15604376469558__multicolumn_DhQUDp p { color: red; }
So you may consider using Theme Settings “Custom CSS” to place @font-face rules.
I now need to know if the font files I have added need to be added in the Edit Code section. I want to be able to use the custom fonts in specific sections only, using the custom CSS box in those sections to target, for example, only a single paragraph, heading, title, etc. I don’t want to code it to target every paragraph or every heading on my entire store. which is why I love using the custom CSS boxes for this reason.
I have coding in different sections of my store which I used the custom CSS box to place the code. All the coding I’ve done in the custom CSS boxes in each section (is coming up RED) but is working and showing on desktop and mobile when in Customize mode. But when I test the site with my desktop, it is fine, but nothing is working on mobile, ALL coding I’ve done within any section of my store using the custom CSS box does not come up on mobile.
So I may need to re-ask the question.
How do I add the fonts to my store in general, so that 1, they work on mobile, and 2, I can use the custom CSS boxes in sections? I only want to change specific things, not all paragraphs and H1 H2 H3 etc.
if you’d like to have a look at how I’ve been using the custom CSS boxes in different sections of my store, I can provide the site name or URL, and let know what may be the issue or cause for it not to work on mobile.
next step would be to contact support over the phone.
When you want to use custom font on your page, it’s a three-step process:
First, ensure that font-files are available for you visitor browsers to download. You may use Google fonts, Shopify Font library, or upload font files to your Files or Theme Assets;
Second – use @font-face rule to instruct browser where to fetch the font-files necessary. If you have your custom fonts in Files, use code similar to https://shopify.dev/docs/themes/architecture/settings/fonts#shopify-admin to avoid theme modification.
Since this uses liquid to generate URL, you’d need to use “Custom liquid” section/block because “Custom CSS” does not support liquid code, like this:
Third – use CSS to instruct browser to use this newly defined font for specific elements on your page, like so (note that font-family must match what you’ve defined in step 2):
p { font-family: "Custom font name", sans-serif; }
So you’ve done step 3), but you also need to do 1) and 2).
You may send me a private message with site details (URL and storefront password or preview URL) if you do not want to share it here – this definitely helps with diagnostics/recommendations.
Hi Tim, Thank you again for your reply and assistance.
Okay sounds good. When using this approach, will it change anything in my store? for example the headings, paragraphs etc.
Or will it just be adding the fonts to my theme per se, so I can continue to use the custom CSS boxes to style the sections as I am doing now? Also, will the fonts work correctly on mobile?
Yes, adding a @font-face rule does not change anything by itself, it simply tells the browser where to get font file to display the font when it is needed. The browser will only apply this to elements matching the rule from step 3).
(Unless you’d manage to select a font family name which is already in use by the theme. Say, theme already uses “Arial” font-face and then you output another font-face rule for “Arial” – in this case all elements which used “Arial” will use your new font instead
And yes, font will work regardless of the device/browser as long as the element matches the CSS rule you’ve created.
So far it does not work on mobile for you simply because the browser does not know where to get the font files for this font.
And it works for you on desktop because you have this file installed on your computer/cached in your browser or alike.
