Hi!
We’ve are currently fully using the parameters functionality to build websites for our customers.
During developing a custom text element and I think there is a small bug regarding fonts.
We added a custom font to the font library called “Heading” and have set that as the initial value for the component:
"fontFamily" : {
"label" : "Family",
"type" : "font-family",
"initial" : "Heading"
},
When the component is loaded inside the page, it will always fall back to sans-serif (or any other fallback font), but it will show “Heading” in the dropdown.
I have to open the dropdown and re-select the same value “Heading” for the element to show the right font-family.
Is there something wrong with the way we have set this up?
The same thing also happens for the font-weight. 100 or 300 is selected as initial value, but it shows as 700. Have to re-select the right value for the component to update and show the right value.
Font settings:
Full json:
{
"component_content": {
"label": "Content",
"type": "text-editor",
"initial": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
"placeholder": "Specify a subtitle",
"height": 4
},
"fontFamily" : {
"label" : "Family",
"type" : "font-family",
"initial" : "Heading"
},
"fontWeight" : {
"label" : "Weight",
"type" : "font-weight",
"initial" : "Bold"
},
"color" : {
"label" : "Color",
"type" : "color-pair",
"initial" : {
"base" : "#1E1E1E",
"alt" : "#1E1E1E"
}
},
"fontSize" : {
"label" : "Font Size",
"type" : "font-size",
"initial" : "1em",
"isVar" : true
},
"paddingTop" : {
"label" : "Padding Top",
"type" : "size",
"initial" : "0em",
"isVar" : true
},
"paddingBottom" : {
"label" : "Padding Bottom",
"type" : "size",
"initial" : "0em",
"isVar" : true
},
"contentWidth" : {
"label" : "Max Width",
"type" : "size",
"isVar" : true,
"initial" : "100%"
},
"textTransform" : {
"type" : "group",
"label" : "Transform",
"params" : {
"transform" : {
"type" : "choose",
"label" : "Transform",
"initial" : "none",
"options" : [
{ "value" : "uppercase", "label" : "TT" },
{ "value" : "capitalize", "label" : "Tt" },
{ "value" : "lowercase", "label" : "tt" },
{ "value" : "none", "label" : "None" }
]
},
"align" : {
"type" : "choose",
"label" : "Align",
"initial" : "align-left",
"isVar" : true,
"options" : [
{ "value" : "Left", "icon": "align-left" },
{ "value" : "Center", "icon": "align-center"},
{ "value" : "Right", "icon": "align-right" },
{ "value" : "Justify", "icon": "align-justify" }
]
},
"textShadow" : {
"type" : "choose",
"label" : "Enable Shadow",
"initial" : "No",
"options" : [
{ "value" : "true", "label" : "Yes" },
{ "value" : "false", "label" : "No" }
]
}
}
}
}