Skip to main content

Documentation Index

Fetch the complete documentation index at: https://developers.kit.com/llms.txt

Use this file to discover all available pages before exploring further.

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
​
default
object
Default font value that is pre-selected when the component first loads. Object with fontFamily (string) and fontWeight (number or string) properties.
​
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. (256 character limit. Supports markdown: [text](url), **bold**, and *italic*)
​
dependencies
object array
Allows for the field to be shown conditionally. dependent on other fields. See dependencies page for more details.

​
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:
  • p
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • ol
  • ul
  • blockquote
  • a
  • “color”,
  • “font-family”,
  • “font-size”,
  • “font-weight”,
  • “letter-spacing”,
  • “line-height”,
  • “text-align”,
  • “text-transform”,
  • “margin-top”,
  • “margin-right”,
  • “margin-bottom”,
  • “margin-left”,
  • “padding-top”,
  • “padding-right”,
  • “padding-bottom”,
  • “padding-left”
  {
    "settings": {
        "postId": "default-to-generosity-id-123",
        "favoriteColor": "#ff0000"
    },
    "styles": {
        "p": {
            "color": "rgb(45, 45, 47)",
            "font-family": "Charter, Georgia, Times, \"Times New Roman\", serif",
            "font-size": "18px",
            "font-weight": "400",
            "letter-spacing": "normal",
            "line-height": "27px",
            "text-align": "start",
            "text-transform": "none",
            "margin-top": "18px",
            "margin-right": "0px",
            "margin-bottom": "18px",
            "margin-left": "0px",
            "padding-top": "0px",
            "padding-right": "0px",
            "padding-bottom": "0px",
            "padding-left": "0px"
        },
        "h1": {
            "color": "rgb(0, 0, 0)",
            "font-family": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
            "font-size": "28px",
            "font-weight": "700",
            "letter-spacing": "normal",
            "line-height": "42px",
            "text-align": "start",
            "text-transform": "none",
            "margin-top": "0px",
            "margin-right": "0px",
            "margin-bottom": "0px",
            "margin-left": "0px",
            "padding-top": "0px",
            "padding-right": "0px",
            "padding-bottom": "0px",
            "padding-left": "0px"
        },
        "h2": {
            "color": "rgb(0, 0, 0)",
            "font-family": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
            "font-size": "21px",
            "font-weight": "700",
            "letter-spacing": "normal",
            "line-height": "31.5px",
            "text-align": "start",
            "text-transform": "none",
            "margin-top": "21px",
            "margin-right": "0px",
            "margin-bottom": "21px",
            "margin-left": "0px",
            "padding-top": "0px",
            "padding-right": "0px",
            "padding-bottom": "0px",
            "padding-left": "0px"
        },
        "h3": {
            "color": "rgb(0, 0, 0)",
            "font-family": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
            "font-size": "16.38px",
            "font-weight": "700",
            "letter-spacing": "normal",
            "line-height": "24.57px",
            "text-align": "start",
            "text-transform": "none",
            "margin-top": "16.38px",
            "margin-right": "0px",
            "margin-bottom": "16.38px",
            "margin-left": "0px",
            "padding-top": "0px",
            "padding-right": "0px",
            "padding-bottom": "0px",
            "padding-left": "0px"
        },
        "h4": {
            "color": "rgb(0, 0, 0)",
            "font-family": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
            "font-size": "14px",
            "font-weight": "700",
            "letter-spacing": "normal",
            "line-height": "21px",
            "text-align": "start",
            "text-transform": "none",
            "margin-top": "0px",
            "margin-right": "0px",
            "margin-bottom": "0px",
            "margin-left": "0px",
            "padding-top": "0px",
            "padding-right": "0px",
            "padding-bottom": "0px",
            "padding-left": "0px"
        },
        "h5": {
            "color": "rgb(0, 0, 0)",
            "font-family": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
            "font-size": "14px",
            "font-weight": "700",
            "letter-spacing": "normal",
            "line-height": "15.4px",
            "text-align": "start",
            "text-transform": "none",
            "margin-top": "0px",
            "margin-right": "0px",
            "margin-bottom": "0px",
            "margin-left": "0px",
            "padding-top": "0px",
            "padding-right": "0px",
            "padding-bottom": "0px",
            "padding-left": "0px"
        },
        "h6": {
            "color": "rgb(0, 0, 0)",
            "font-family": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
            "font-size": "14px",
            "font-weight": "400",
            "letter-spacing": "normal",
            "line-height": "21px",
            "text-align": "start",
            "text-transform": "none",
            "margin-top": "0px",
            "margin-right": "0px",
            "margin-bottom": "0px",
            "margin-left": "0px",
            "padding-top": "0px",
            "padding-right": "0px",
            "padding-bottom": "0px",
            "padding-left": "0px"
        },
        "ol": {
            "color": "rgb(45, 45, 47)",
            "font-family": "Charter, Georgia, Times, \"Times New Roman\", serif",
            "font-size": "18px",
            "font-weight": "400",
            "letter-spacing": "normal",
            "line-height": "27px",
            "text-align": "start",
            "text-transform": "none",
            "margin-top": "18px",
            "margin-right": "0px",
            "margin-bottom": "18px",
            "margin-left": "18px",
            "padding-top": "0px",
            "padding-right": "0px",
            "padding-bottom": "0px",
            "padding-left": "0px"
        },
        "ul": {
            "color": "rgb(45, 45, 47)",
            "font-family": "Charter, Georgia, Times, \"Times New Roman\", serif",
            "font-size": "18px",
            "font-weight": "400",
            "letter-spacing": "normal",
            "line-height": "27px",
            "text-align": "start",
            "text-transform": "none",
            "margin-top": "18px",
            "margin-right": "0px",
            "margin-bottom": "18px",
            "margin-left": "18px",
            "padding-top": "0px",
            "padding-right": "0px",
            "padding-bottom": "0px",
            "padding-left": "0px"
        },
        "blockquote": {
            "color": "rgb(55, 63, 69)",
            "font-family": "\"open sans\", \"helvetica neue\", Helvetica, Arial, sans-serif",
            "font-size": "17.5px",
            "font-weight": "400",
            "letter-spacing": "normal",
            "line-height": "25px",
            "text-align": "start",
            "text-transform": "none",
            "margin-top": "17.5px",
            "margin-right": "0px",
            "margin-bottom": "17.5px",
            "margin-left": "0px",
            "padding-top": "10px",
            "padding-right": "20px",
            "padding-bottom": "10px",
            "padding-left": "20px"
        },
        "a": {
            "color": "rgb(32, 177, 150)",
            "font-family": "\"open sans\", \"helvetica neue\", Helvetica, Arial, sans-serif",
            "font-size": "14px",
            "font-weight": "400",
            "letter-spacing": "normal",
            "line-height": "20px",
            "text-align": "start",
            "text-transform": "none",
            "margin-top": "0px",
            "margin-right": "0px",
            "margin-bottom": "0px",
            "margin-left": "0px",
            "padding-top": "0px",
            "padding-right": "0px",
            "padding-bottom": "0px",
            "padding-left": "0px"
        }
    }
}

  {
    "type": "fontFamily",
    "name": "paragraph_font",
    "label": "Paragraph font",
    "default": { // optional
      "fontFamily": "'Courier New', Courier, monospace",
      "fontWeight": 400
    },
    "required": true, // optional
    "help": "help text shown in tooltip to creator while editing", // optional
    "dependencies": [
      {
          "field": "dependent_field",
          "value": "dependent_value" //optional
      }
    ] // optional
  }

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