font

---

The font property type allows developers to present a dropdown list of active fonts defined in the store’s Theme Editor. It integrates with Miva’s Font Manager (introduced in Miva 10.11.00) to ensure all font selections align with brand-approved typography.

The selected value is stored as a font-family string suitable for use directly in CSS or inline styles.

font Definition

{
    "code": "font_manager",
    "prompt": "Select Font",
    "type": "font"
}

This will display a dropdown in Page Builder listing all fonts currently marked as “active” in the store’s admin.

Supported Fields

Field	Type	Required	Description
code	string	Yes	Unique key used in l.settings:instance.
prompt	string	Yes	Label shown in the admin interface.
type	string	Yes	Must be "font".
required	boolean	No	If true, user must check before saving.
preview_property_selector	string	No	Target element for PageBuilder.
visibility_conditions	object	No	Shows/hides field based on logic.

l.settings:instance Structure

:heading_font:value=Poppins, sans-serif

The value is a valid CSS font-family string.

Template Usage

Use the selected font-family directly in your inline styles or class logic:

<h2 style="font-family: &mvte:instance:heading_font:value;">Your Heading</h2>

JavaScript Access

<script>
    var instance = <mvt:eval expr="miva_json_encode( l.settings:instance, '' )" />;
    var font = instance.heading_font.value;

    document.querySelector("h2").style.fontFamily = font;
</script>

defaults Definition

"defaults": {
  "heading_font": {
    "value": "Poppins, sans-serif"
  }
}

If the field is required and no default is provided, users must select one before saving.

Best Practices

• Use font fields to align with store typography and avoid hardcoded values.
• Combine with textsettings to allow rich text customization.
• Always validate that fallback fonts are included in your selected values.
• Use preview_property_selector if live preview styling is needed.

Complete Example

{
    "code": "heading_text",
    "prompt": "Heading Text",
    "type": "text",
    "textsettings": {
        "fields": [
            {
                "code": "font_family",
                "prompt": "Font Family",
                "type": "font",
                "style": "font-family"
            }
        ]
    }
}