font_picker

A font family picker that lets the merchant choose a font from available fonts. Returns the selected font family name as a string.

Properties

Property	Type	Required	Description
type	"font_picker"	Yes	Field type identifier
label	string	Yes	Label shown in the builder
default	string	No	Default font family

Usage

schema.json

{
  "headingFont": {
    "type": "font_picker",
    "label": "Heading Font",
    "default": "Cairo"
  },
  "bodyFont": {
    "type": "font_picker",
    "label": "Body Font",
    "default": "Inter"
  }
}

Template

<style>
  h1, h2, h3 {
    font-family: '{{ widget.settings.headingFont }}', sans-serif;
  }
  body {
    font-family: '{{ widget.settings.bodyFont }}', sans-serif;
  }
</style>

Output

The saved value is the font family name as a string:

{
  "headingFont": "Cairo",
  "bodyFont": "Inter"
}

معلومة

The font picker displays available fonts with a preview of each font style. The merchant sees the font rendered in its actual typeface.

Interactive Preview

Interactive Preview

Heading Font

CairoInterRobotoTajawalPoppinsOpen Sans

The quick brown fox — Cairo

Live Output

{
  "headingFont": "Cairo"
}