Custom Adobe Fonts not working on mobile

Theme discussion Shapes
#1

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!

#2

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 }};
        }
#3

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
#4

Ticket submitted, thanks so much!