H1, H2, H3 Headings in Custom Font not showing or loading on phone / tablet website. Broadcast theme

Store Design
, , , , ,

Topic summary

A Shopify store owner using the Broadcast theme is experiencing issues with custom font headings (H1, H2, H3) not displaying on mobile and tablet devices, though they work correctly on desktop.

Key Problems:

  • Custom font “Mark My Words” fails to load on mobile/tablet (specifically iPhone 11 and above)
  • Some headings that should appear white are showing as black on mobile
  • Large blank spaces appear where headings should be
  • Code appears at the bottom of every page on both desktop and mobile

Technical Details:

  • User has added @font-face declarations and custom CSS to theme.css file
  • Code includes media queries and font-family definitions
  • Images provided show missing headings circled in yellow

Attempted Solutions:

  • One responder suggested changing @media(min-width:1024px) to @media(max-width:1024px) to target mobile devices, but this didn’t resolve the issue
  • Another contributor noted duplicate font definitions between theme.css and layouts/theme.liquid, with inconsistent naming (‘Mark My Words’ vs ‘mark my words’)
  • Recommendations include wrapping CSS in <style> tags, using quotes around font names with spaces, and providing fallback fonts

Current Status:
Unresolved. The store owner is seeking direct assistance to fix the code as the issue persists.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

Website: https://madsunsea.myshopify.com/

Hello all, please can someone help me? I am trying to get my headings to load on mobile - they don’t show on mobile or tablet. Some of the headings I have also changed to be white in colour - these also do not show on mobile and when they do eventually appear they are black, but white on desktop.

I am looking for the code to change the colour of some of the headings on mobile.

I am also looking for code to make my headings appear on mobile - as my website looks horrendous without them.

I currently am using this code:

@media(min-width:1024px){.wrapper{max-width:100% !important}}

h2.image-with-text__heading.inline-richtext.h1 strong { color: #FF00A3 !important; } } @font-face { font-family: 'mark my words'; src: url('MarkMyWords-Oblique.eot'); src: url('MarkMyWords-Oblique.otf') format('embedded-opentype'), url('MarkMyWords-Oblique.woff') format('woff'), url('MarkMyWords-Oblique.woff2') format('woff2') url('MarkMyWords-Oblique.ttf') format('truetype'), url('MarkMyWordsSVG-Oblique-SVG') format('svg'); font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: antialiased; } @font-face { font-family: 'MarkMyWords-Oblique'; src: url('MarkMyWords-Oblique.eot'); src: url('MarkMyWords-Oblique.otf') format('embedded-opentype'), url('MarkMyWords-Oblique.woff') format('woff'), url('MarkMyWords-Oblique.woff2') format('woff2') url('MarkMyWords-Oblique.ttf') format('truetype'), url('MarkMyWordsSVG-Oblique-SVG') format('svg'); font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: antialiased; }

which i found on another forum post.

I am not sure why but the above code doesn’t have any affect on mobile headings appearing, but if I delete it - it erases all custom font…

It also happens to show at the bottom of every page on desktop and mobile - please help!

The big spaces, which I have circled with a yellow

heading not showing on mobile
heading not showing on mobile642×1390 129 KB

code at bottom of all pages
code at bottom of all pages1284×2778 381 KB

heading not showing on mobile
heading not showing on mobile642×1390 135 KB

heading not showing on mobile
heading not showing on mobile1284×2778 231 KB

heading not showing on mobile
heading not showing on mobile642×1390 89.9 KB

heading not showing on mobile
heading not showing on mobile642×1390 93.9 KB

heading not showing on mobile
heading not showing on mobile1284×2778 216 KB

pen is where my headings should appear.

Website: https://madsunsea.myshopify.com/

Please look at both mobile and desktop to see colour changes and heading disappearance.

2

Hello @SUNSEASOL

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can modify @media(min-width:1024px) to @media(max-width:1024px) so that the code only works on mobile and tablet devices.

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

3

Hey Amelia, this doesn’t solve my problem unfortunately. I having issues with my custom font and headings showing. Many thanks

4

Where and how are you adding this code?

If you’re adding it to the section or layout file, CSS rules must be wrapped with … tags.

5

Hello Tim,

I have been adding it to my theme.css file :slightly_smiling_face:

6

Now it looks fine to me.

However, looks like you have also some rules in layouts/theme.liquid:

@font-face {font-family: Mark My Words; .... h2 {font-family: mark my words !important;}

And font-family in theme.css is defined as ‘Mark My Words’.

It kinda duplicate and looks like theme.css one is not working (and uses different font-file URLs?)

I’d recommend to use qoutes or semicolons around font names if those contain spaces.

Also, provide a fallback font, like

h2 {font-family: 'Mark My Words', sans-serif !important;}
7

Hey Tim, any chance you can work with me to resolve the coding - aka go into my coding and change it? As it’s still not working and I need to get it sorted asap! Just to clarify: ‘Mark My Words’ font still doesn’t display on mobile / iPhone models above iPhone 11 and I have no idea why… thanks :slightly_smiling_face: