Font Picker And App metadata inside Theme Extesion Settings

Extensions
1

Hello!

Our app has an app theme extension which has a few options for stylings and customizations. Because our app started with ScriptTag and Asset API, all these settings were created as part of the app settings. We want to now migrate these settings into the app theme extension settings schema. But we’ve hit two limitations, mainly that settings key in the schema doesnt support app metafields and also font picker doesnt work for example.

  1. Settings Schema - App metafields in settings

App metafields in settings Is there any workaround for this? Thinking maybe I can build an API to crawl the store and sync settings from theme settings to my app metafields, but this seems like an overkill and super fragile solution.

  1. Font Picker setting

Below is a sample code from my extension block:


{% schema %}
{
  "name": "Shop The Look",
  "templates": ["product", "cart"],
  "stylesheet": "bundle.css",
  "javascript": "bundle.js",
  "target": "section",
  "settings":[
    {
      "type":"header",
      "content":"Heading"
    },
    {
      "type":"font_picker",
      "id":"heading_font",
      "label":"Font",
      "default":"helvetica_n4"
    }
  ]
}
{% endschema %}

    {%- style -%}
   .shopthelook-section-v2 .heading {
        font-family: {{ block.settings.heading_font.family }};
      }
    {%- endstyle -%}

I picked a new font family in theme editor and I see in DevTools inspector that it matches, but the font never gets applied (rendered font isn’t the font I picked.) My understanding is that Shopify handles font loading in this case, but could this be only for theme blocks and not app theme blocks?

I tried loading the font myself by getting its url from the font object above and adding it + adding @font-face and this also didn’t work (I can see theme loaded in network tab though.) Even for safe web fonts like “Arial” for example. Am I doing something wrong or is this expected behaviour?

It would be great if I can put all of my settings inside theme editor as that’s native behaviour and I don’t have to build and maintain my own editor.

Thanks!

2

To solve this, manually load the selected font inside your app block using <link> and @font-face from block.settings.heading_font.url. For syncing settings to app metafields, build an API in your app to read the theme extension settings and update metafields accordingly. This ensures native editor use and data consistency without needing fragile workarounds.

3

Thanks for the reply. Checking the block settings using theme API works great.

Regarding loading the font, I have already tried inclduing the font url and adding font-face:

{% if block.settings.heading_font.stylesheet_url != blank %}

{% endif %}

{%- style -%}

  @font-face {
  font-family: {{ block.settings.heading_font.family }};
  src: url("{{ block.settings.heading_font.stylesheet_url }}") format("woff2");
  font-weight: {{ font_weight }};
  font-style: {{ font_style }};
  }

{%- endstyle -%}

But this didn’t work. Maybe I’m missing something something wrong ?

4

Shopify’s font_picker in app blocks does not automatically load fonts. Instead of using stylesheet_url, use block.settings.heading_font.url directly in a <link> tag and inside @font-face. Also ensure the font loads before usage. Example:

hsop
hsop360×179 5.4 KB

Ensure CORS is not blocking font loading and that the font family matches exactly.

2/2

5

This unforutantely didn’t work, font object doesn’t have its url as mentioned in docs: Liquid objects
I have also tried debugging this and didn’t fetch the font with that code (added additional debug):

image
image1116×630 55.2 KB

It seems like the fetched fonts I mentioned earlier in network tab were from Shopify theme editor, but once selected in font picker for the app the extension, they aren’t loaded within the extension.