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

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

Yasvi
Shopify Partner
4 0 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

 

 

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

 

Please solve it.

Replies 2 (2)

Hernan21
Shopify Partner
2 0 0

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

Chirag_Joshi
Shopify Partner
7 0 0

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