Typography & Fonts

The customFonts option controls the font picker and fontSizes controls the size picker. Together they decide what typography users can apply, which is usually the first thing to pin down when pages have to follow brand guidelines.

customFonts

The customFonts object adds fonts to the editor's font picker, either alongside the default list or replacing it:

{
  customFonts: {
    override: false,
    fonts: [
      {
        label: "Roboto",
        style: "Roboto, sans-serif",
        url: "https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
      },
      {
        label: "Merriweather",
        style: "Merriweather, serif",
        url: "https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap"
      }
    ]
  }
}

The properties:

• override (boolean, optional): when true, replaces all default fonts with only your custom fonts; when false, your fonts are added alongside the default list.
• fonts (array, required): the font definitions. Each font has a label (string, required) shown in the font picker, a style (string, required) with the CSS font-family value including fallbacks (e.g. "Roboto, sans-serif"), and an optional url (string) with a stylesheet to load. Omit url for websafe/system fonts; fonts with a url have their stylesheet loaded automatically.

Without customFonts, the editor uses its default list of 23 fonts: 19 Google-hosted fonts (Inter, Poppins, Montserrat, Lato, Work Sans, Manrope, and others) loaded on init, plus the websafe staples Arial, Georgia, Helvetica, and Verdana.

WARNING

The field names matter: fonts that don't match the { label, style, url? } shape are rejected as a whole. The editor shows an error notification and loads none of your custom fonts.

Include fallbacks in every style string (e.g. "Roboto, Helvetica, sans-serif"), and load multiple weights (commonly 400 and 700) in the stylesheet URL. Keep the number of custom fonts modest; every stylesheet adds to page load.

fontSizes

The fontSizes option (number[], optional) specifies the pixel sizes offered in the editor's font size picker:

{
  fontSizes: [10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 64]
}

When it is not set, the editor uses its default list: [11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24, 30, 36, 48, 64]. Landing pages typically benefit from larger type sizes than email templates, so a range extending past the default maximum is common.

Text editing

In-canvas rich-text editing (text blocks, buttons, navbar buttons) is powered by TipTap. The Email Editor's tinyConfig option does not apply to the Landing Page Editor and is not supported. The color swatches offered in the text toolbar come from the colors option.

INFO

There is no Google Fonts API key option in the Landing Page Editor. To make Google Fonts available, list them explicitly via customFonts with their https://fonts.googleapis.com/css2?... URLs.