How to output font styles

[iMike]

Hello

I've added the following to the fields.json so then the user can customise the font. 

{
"name" : "font",
"label" : "Font",
"required" : false,
"locked" : false,
"load_external_fonts" : true,
"type" : "font",
"default" : {

"font":"Merriweather",
"font_set":"GOOGLE",
"size_unit" : "px",
"color" : "#000",
"styles" : {

"font-weight" : "400",
"font-style" : "inherit",
"text-decoration" : "none"

}
},
"visibility" : {
"hidden_subfields" : {
"font": false,
"size": true,
"variant" : false
}
}
}

How do I output the font-weight, font-style and text-decoration in the the frontend, for example in the css file?

When I use this: {{ theme.font.styles }} then I get that:

{font-family=Merriweather, font-style=normal, font-weight=normal, text-decoration=none};

Obviously this won't work in the css file, so I just want to say something like:

p {

font-weight: {{ theme.font.styles.font-weight }};

}

But this gives me "0" instead...

Any ideas? I couldn't find an answer to this anywhere...

[JamesW42]

The solution was to use the entire CSS object. So instead of

theme.[field-name].styles.font-style

I used

theme.[field-name].css

which returns

font-family: 'Arial';
font-style: bold;

so then you can do this:

h1, h2, h3, h4, h5, h6 {
  {{theme.[field-name].css}}
}

to output this:

h1, h2, h3, h4, h5, h6 {
  font-family: 'Arial';
  font-style: bold;
}

These are my working snippets:

fields.json

[{
    "name" : "font",
    "label" : "Font",
    "required" : false,
    "locked" : false,
    "load_external_fonts" : true,
    "type" : "font",
    "default" : {
      "font":"Newsreader",
      "font_set":"GOOGLE"
    },
    "visibility" : {
      "hidden_subfields" : {
        "size": true,
        "color": true,
        "underline": true
      }
    }
  }]

theme-overrides.css

{% set heading_styles = theme.font.css %}

h1,
h2,
h3,
h4,
h5,
h6 {
    {{ heading_styles }}
}

[WMM_Inbound]

Hi @iMike,

can you pleas try:

p {
font-weight: {{ theme.font.styles.css }};
}

[dennisedson]

@A_Wessolly ,

Can you assist here 🙏