Mobile Header - custom font, size, color

Store Design
, , ,

Topic summary

A user successfully resolved issues with implementing custom fonts on mobile Shopify themes after initially struggling with media queries and header styling.

Original Problem:

  • Custom font worked on desktop but failed to display on mobile view
  • Font was properly uploaded to assets with correct @font-face implementation
  • Uncertainty about mobile header sizes and correct media query syntax
  • Desired a solution that would persist when duplicating themes (avoiding inspect-view-specific code)

Resolution:
The original poster figured out how to correct their media queries and properly place custom h2 changes, achieving functionality across both desktop and mobile views. However, they did not share the specific solution.

Current Status:
A second user is experiencing the same issue despite:

  • Uploading the font file correctly
  • Adding @font-face code to base.css
  • Successfully implementing custom CSS for h2 on desktop

They’ve requested the specific solution from the original poster but have not yet received details on the corrected media query implementation.

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

Hello, I have read numerous solutions for this and yet I continue to be unable to solve it. I have implemented a custom font on my desktop view. I can’t seem to get it implemented on the mobile view. I have verified that the custom font is actually loading correctly and not just pulling it off of my own files (had a friend check their view of the website). (I loaded it into assets, I have a @font face solution for it with the proper URL. All of which works on desktop.) I am hoping to find a solution that will maintain even if I duplicate the theme (So preferably not one that takes the code from the inspect view. Hoping there is a custom CSS solution or one I can implement inside of the code).
I have implemented a Header on the mobile view rather than the text box. (I have been unable to determine what size that header is. I know the desktop is h2, I have tinkered with several different header sizes on the mobile (trying to change their font, color, and size) with no luck.
I have a very minimal understanding of how to work in Shopify, so I’d appreciate solutions aimed at noobs. I feel like perhaps the solution is combined in understanding the media read and the min/max, but my experiments with that have failed and my understanding of how they are functioning is poor and likely incorrect. If your solution involves adjusting those, it would be great if you could explain how they work. I assumed that the you do a media read on the desktop banner with a min size that is one larger than the max of the media read on the mobile, but when I tinker with trying to do that, it either doesn’t fix my problem or my functioning desktop banner or custom CSS stops working properly for the desktop (my most recent attempts don’t break the desktop version, but they don’t improve the mobile version). I am guessing that if I could figure out the header size of the mobile banner that would be beneficial (it is whatever size defaults in when you add a banner to the mobile). I did find where there was a descriptor in the inspect view of the mobile that seemed to be about the mobile banner that read: shopify-section-template–16916345913462__image_banner_D6RreB, but again, that’s a solution that seems like it would not continue over if I duplicate the theme or perhaps even if I change my mobile banner. (Side note: having done so numbeous times, my ID is showing the same for the desktop and mobile views in any case.)
I would love to learn to fish rather than to copy and paste. I have been trying very hard to teach myself how to reason through this. Thank you

4 Likes
2

Hi there! :waving_hand:

It sounds like your custom font isn’t applying on mobile, likely due to missing media queries or a conflicting header size. Make sure your @font-face rule is correctly added in your theme’s CSS and then include a mobile-specific style.Also, verify that the font file is properly uploaded to the “assets” folder and that the URL paths are correct. If you still have issues, the problem might be with a conflicting class or inline style. Let me know if this helps! :blush:

3

Hi, I have tried the media queries, whether they are correct is unknown. The @Font-face rule is working for the desktop, implemented in code and called in custom Css. I don’t know how to do the mobile-specific query correctly, I suspect, thus the post for assistance. :wink: The font file is loaded to assets and URL is correct and verified. It would appear you missed some of the detail in my original post. I know it was long, I was trying to head off questions about things I had successfully tackled versus failed at. Thanks.

4

I figured out how to correct my media queries and where to correctly place my custom h2 changes so that both the desktop and mobile are functioning with the custom font/color.

5

hi, I’m having a similar issue. Is there any chance you could share how your corrected your media queries?

I ahve uploaded the font

I’m using the custom CSS on the page to change the h2

This works on desktop.

I then added this code to the base.css file:

@font-face {
font-family: “Tirelessly_Love_You”;
src: url(“https://cdn.shopify.com/s/files/1/0840/0873/0951/files/Tirelessly_Love_You.woff2?v=1727435712”)
format(“woff2”);
}

I’ve tried multiple versions of it…and still the font won’t show on mobile devices :disappointed_face:

Would appreciate any guidance :slightly_smiling_face: