{
    "type": "fontFamily",
    "name": "paragraph_font",
    "label": "Paragraph font",
    "required": true, // optional
    "help": "help text shown in tooltip to creator while editing" // optional
  }

  {
    "settings": {
      "paragraph_font": {
        "fontFamily": "'Courier New', Courier, monospace",
        "fontWeight": 400
      }
      // ...additional plugin settings
    }
    // ...plugin-specific additional data
  }
The font picker allows creators to select typography that matches their brand identity and enhances readability. It provides access to email-safe font families with their appropriate fallbacks, along with font weight options to create visual hierarchy and emphasis in email content. example font picker

​
Compatibility

Plugin typeAvailablityAdditional notes
Content blocks
Media source

​
Properties

​
type
string
required
fontFamily - the type of the component
​
name
string
required
A unique internal-only identifier that is posted to an app’s plugin server to share values inputted by the creator
​
label
string
required
Creator-facing identifier that is shown in the plugin environment
​
required
boolean
Determines whether the creator must select a font before proceeding
​
help
string
Brief creator-facing explanation that clarifies the component’s purpose and usage.

​
Best practices

​
Automatic styling

When using the font picker for content blocks, alongside the settings object, Kit also shares data on the styles used within the email template - allowing your plugin to assume the styling of the email automatically, to make it feel as native as possible. Details on the style data available can be found below: 
  {
    "type": "fontFamily",
    "name": "paragraph_font",
    "label": "Paragraph font",
    "required": true, // optional
    "help": "help text shown in tooltip to creator while editing" // optional
  }

  {
    "settings": {
      "paragraph_font": {
        "fontFamily": "'Courier New', Courier, monospace",
        "fontWeight": 400
      }
      // ...additional plugin settings
    }
    // ...plugin-specific additional data
  }