Topol Documentation

Appearance

Custom Fonts ​

Topol gives you the flexibility to use custom fonts within your email templates, allowing for greater brand consistency, stylistic control, and visual uniqueness — all within the drag-and-drop editor.

Whether you're using Google Fonts, self-hosted fonts, or web-safe typefaces, you can easily configure your typography directly through the Topol Plugin integration.

How to Set Custom Fonts in the Plugin ​

To define your own fonts, simply add the customFonts configuration to your TOPOL_OPTIONS object:

ts
const TOPOL_OPTIONS = {
  // ... other options ...
  customFonts: {
    override: false, // If true, it replaces default fonts. If false, it appends.
    fonts: [
      {
        label: "Mukta", // Name shown in the font selector
        style: "Mukta, sans-serif", // Font stack (MUST include fallback)
        url: "https://fonts.googleapis.com/css2?family=Mukta:wght@400;700", // URL to the font CSS
      },
      {
        label: "Lora",
        style: "'Lora', serif",
        url: "https://fonts.googleapis.com/css2?family=Lora:wght@400;700",
      },
    ],
  },
};

INFO

Please keep in mind that font names with space (two or more words), needs to be inside brackets, e.g. '"Verdana Pro", sans-serif' or "'Verdana Pro', sans-serif"

Key Properties Explained ​

  • label: The name users will see in the font dropdown in the editor. It must match the font name used in the style property.

  • style: The full CSS font stack (make sure to include fallback fonts like sans-serif, serif, etc.).

  • url: The external link to the CSS file for the font. You can use Google Fonts or self-hosted stylesheets.

Google Fonts Integration ​

If you're using Google Fonts, just copy the link from the Google Fonts website and paste it into the url field. No need to install anything separately.

If you're also using the image editor, you’ll need to provide a separate googleApiKey to enable Google Fonts inside images. This is separate from the customFonts setting.

For more information, visit this article.

Self-Hosted Fonts ​

DANGER

When working with fonts, always ensure you set suitable web-safe fonts and operating system fonts as fallback options. Custom fonts are significantly limited across various email clients.

If you’re using your own font files, you can host the font CSS (using @font-face declarations) on your own server and reference it just like you would with a Google Font. Be sure to serve .woff or .woff2 formats for the best compatibility with the few email clients that support custom web fonts.