Custom Adobe Fonts not working on mobile

I added 2 custom fonts (1 each for headings and body text) as instructed in the theme documentation: Use a custom font | Switch Docs

Unfortunately, the fonts I chose are not showing up on mobile. I am somewhat familiar with HTML/CSS but not Liquid, so I’m not sure what I’m missing. I have no idea how to get the fonts to show up on mobile as well. Please help!

For reference, here is what my code looks like in the theme.liquid file. (I have no idea what the “accent font” is so I just left that part in the code alone.)

        :root {
          --heading-font-stack: 'Swear Display' !important; 
          --heading-font-weight: 700;
          --heading-font-style: normal;
          --heading-letterspacing: {{ heading_letterspacing }};
          --heading-capitalize: {{ heading_capitalize }};
          --main-font-stack: 'Sofia Pro' !important;
          --main-font-weight: 400;
          --main-font-style: normal;
          --accent-font-stack: '{{ accent_font.family }}, {{ accent_font.fallback_families }}';
          --accent-font-weight: {{ accent_font.weight }};
          --accent-font-style: {{ accent_font.style }};
        }

Hi @seejessletter

Thanks for letting us know, we’ll try replicate this on our end and follow up.

If you can also submit a ticket if you haven’t already, I’ll make sure to flag this with our support team.

1 Like

Ticket submitted, thanks so much!