---
title: "Typography & Fonts"
description: "Add custom fonts to the Landing Page Editor and control which font sizes are offered, so designs stay on brand guidelines."
url: https://docs.topol.io/landing-page-editor/guide/typography.html
---

# 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:

```typescript
{
  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:

```typescript
{
  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](https://docs.topol.io/landing-page-editor/guide/appearance.html#colors).

> **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.