Custom font not applied to single element on mobile - any advice?

Shopify Discussion

Topic summary

A user successfully resolved an issue where a custom font (added via the AZ: Google Font and Custom Font app) wasn’t displaying on mobile devices in the Shopify Savour theme, despite working on desktop.

Problem identified:

  • The font app was targeting heading elements (like <h3>)
  • The problematic element was rendering as a <p> tag instead
  • This mismatch prevented the custom font from applying on mobile

Solution:

  • Edited the element’s .liquid code file
  • Changed the HTML tag from <p> to <h3> to match what the font app targets
  • After this code adjustment, the custom font rendered correctly on mobile

Another user suggested using browser dev tools to inspect mobile-specific CSS and check for theme style overrides, which helped guide the troubleshooting process. The issue is now resolved.

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

I have used the AZ: Google Font and Custom Font app to add a font I designed to my business website. Initially, I struggled to get this working on ios but the app has resolved this.

The font has been applied to the desktop version of the site, but doesn’t load on mobile.

Additionally, I can’t select the component in the “add font to custom elements” section in the app. (But have successfully be able to do this for to other elements.) I have also applied the style to all headings on the site using the HTML option in the app - this is working fine on all other elements.

Just wondering if anyone has any tips for applying the custom font to the element?

For reference, I am using the new Savour theme.

Many thanks in advance for your help! :slightly_smiling_face:

2

Hey! I’ve run into a similar issue when working with custom fonts and themes like Savour — especially when mobile styles aren’t picking up properly.

Sometimes it comes down to how the CSS targets those elements, or if the mobile view is using different class names/layouts. You might want to try inspecting the mobile version through Chrome Dev Tools or Safari’s dev tools on a Mac.

Also, if you’re using HTML to apply fonts to headings, make sure it’s not being overridden by the theme’s mobile-specific styles.

Hope this helps point you in the right direction!

3

Hi - it’s https://www.iridian.design/. Many thanks for your reply! :slightly_smiling_face:

4

Thanks for this @ryanc ! I had a look at the theme’s code and it was an easy fix. :slightly_smiling_face:

5

Ok - this is the solution I found… I went to the element that I was having issues with and then clicked “edit code” to edit the element’s .liquid.

When I was there, I noticed that this block was being told to render as

, so I just updated the formatting to

because this is what my 3rd-party font app is targeting. Then when I refreshed it on mobile the text was rendering correctly! :slightly_smiling_face:

Old snippet:

{% if block.settings.product == blank and request.design_mode %}
  {% assign text = 'placeholders.product_title' | t %}
  {% assign product_title = '

' | append: text | append: '

' %}
  {% render 'text', fallback_text: product_title, block: block %}
{% elsif block.settings.product != blank %}
  {% assign product_title = '

' | append: block.settings.product.title | append: '

' %}
  {% render 'text', fallback_text: product_title, block: block %}
{% endif %}

New snippet with edits:

{% if block.settings.product == blank and request.design_mode %}
{% assign text = 'placeholders.product_title' | t %}
{% assign product_title = '### ' | append: text | append: '' %}
{% render 'text', fallback_text: product_title, block: block %}
{% elsif block.settings.product != blank %}
{% assign product_title = '### ' | append: block.settings.product.title | append: '' %}
{% render 'text', fallback_text: product_title, block: block %}
{% endif %}