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

[iridiandesigner]

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! 🙂

[iridiandesigner]

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

[ryancook1525]

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!

[iridiandesigner]

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

[iridiandesigner · Accepted solution]

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 <p>, so I just updated the formatting to <h3> because this is what my 3rd-party font app is targeting. Then when I refreshed it on mobile the text was rendering correctly! 🙂 

Old snippet: 

{% if block.settings.product == blank and request.design_mode %}
  {% assign text = 'placeholders.product_title' | t %}
  {% assign product_title = '<p>' | append: text | append: '</p>' %}
  {% render 'text', fallback_text: product_title, block: block %}
{% elsif block.settings.product != blank %}
  {% assign product_title = '<p>' | append: block.settings.product.title | append: '</p>' %}
  {% 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 = '<h3>' | append: text | append: '</h3>' %}
{% render 'text', fallback_text: product_title, block: block %}
{% elsif block.settings.product != blank %}
{% assign product_title = '<h3>' | append: block.settings.product.title | append: '</h3>' %}
{% render 'text', fallback_text: product_title, block: block %}
{% endif %}