Ability to add custom font to theme settings interface

Retired Boards Appdev Store Design
, ,

Topic summary

A developer is trying to add custom fonts to Shopify’s theme customization interface, specifically within the Impulse Theme. They reference Shopify’s documentation which states custom fonts can be added via settings, but question whether these fonts can appear alongside Shopify’s built-in font library or only as separate select options in sections.

The user shares their current settings_schema code showing a basic select setting with “body” and “heading” options, seeking clarification on what’s actually possible when implementing custom font selection.

Current Status:

  • The question remains unanswered
  • One follow-up comment asks if the original poster found a solution
  • No concrete implementation examples or workarounds have been provided
Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hi,

In Shopify dev.docs for Fonts, they say that it is possible to add custom fonts to the theme’s customization interface:

If you include custom fonts in your theme and want to provide merchants with the ability to choose the font, then you need to create a setting for the selection, such as a select setting. You can then reference the setting value in your CSS when defining which font to use for the associated elements.

Is there are way to have the custom fonts added among the other font from Shopify’s library? Or is it rather the (underwhelming) ability to create a select options elsewhere (in sections, as an example)?

I am customizing Impulse Theme. Here’s the relevant part in settings_schema:

{
        "type": "select",
        "id": "type_collection_font",
        "label": "t:settings_schema.typography.settings.type_collection_font.label",
        "default": "heading",
        "options": [
          {
            "value": "body",
            "label": "t:settings_schema.typography.settings.type_collection_font.options.body.label"
          },
          {
            "value": "heading",
            "label": "t:settings_schema.typography.settings.type_collection_font.options.heading.label"
          }
        ]
      }

Anyone successfully created such a setting? What’s possible?

Thank you!

2

Did you ever manage to do this?