How to apply a selected font to body in settings_schema.json?

Shopify Discussion

Topic summary

A Shopify developer is attempting to apply a custom font selected via font_picker in settings_schema.json to body and heading elements, but the font isn’t rendering on the storefront despite appearing correctly in the theme editor.

The Problem:

  • Font picker defined with ID Body_font and default poppins_n4
  • Variable $body_font assigned as {{ settings.Body_font }} in style.scss.liquid
  • Applied to body, headings, paragraphs, and links
  • Inspector shows “fontDrop” instead of selected font
  • Page refreshes and cache clearing haven’t resolved the issue

Solution Provided:
The font object in Shopify Liquid requires accessing the family property specifically. The correct syntax should be:

$body_font: {{ settings.Body_font.family }};

Reference: Shopify font object documentation

Status: One other user reported experiencing the same issue, seeking confirmation if the solution worked.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

So I have defined schema for typography, in which i want to select font for body.
So I have defined schema, in settings_schema.json file

{
        "name": "typography",
        "settings": [
            {
                "type": "font_picker",
                "label": "Body font",
                "id": "Body_font",
                "default": "poppins_n4"
            }
        ]
    }

and I have stored this fonts in one variable and applied that to body,h1 to h6,p and a tag.
I have written in style.scss.liquid file

$body_font: {{ settings.Body_font }};

body{
    background_color: $bg_color;
    color: $text_color;
    font-size: 24px;
    font-family: $body_font;
    font-style: normal;
}
h1,h2,h3,h4,h5,h6,p,a{
    font-family: $body_font;
}​

now, in theme editor it shows that you have selected poppins font like this

Yasvi_0-1688031216057.png
Yasvi_0-1688031216057.png312×243 4.58 KB

but when I open store this font has not been applied to body. and I inspected it shows font-family: fontDrop. so what is it?? I think it is error regarding loading the fonts. but I have refreshed page like hundreds of times and also cleared browser cache.

Yasvi_1-1688031465697.png
Yasvi_1-1688031465697.png325×186 3.93 KB

Please solve it.

1 Like
2

Hi!

‘font’ is an object in shopify schema, you have to use ‘family’, it should be like this: settings.Body_font.family.

more information here: https://shopify.dev/docs/api/liquid/objects/font

3

Having the same issue and no solution. Did you get any solution?