Skip to main content
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.
​
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
  }