How to modify fonts in the dropdown

You can customize the list of fonts available in the font family dropdown (e.g., to add a font like "Inter") by combining TinyMCE configuration with font loading steps. Here's how to do it.

1. Enable Font Family Dropdown

In the plugin settings, ensure the "Font family dropdown" option is enabled. This displays the font selector in the toolbar.

2. Add Font to the Editor Configuration

Use the Custom additional options field in the editor's property inspector to define the font list and import the font. For example:

{
  "font_family_formats": "Inter=Inter, sans-serif; Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Tahoma=tahoma,arial,helvetica,sans-serif; Times New Roman=times new roman,times; Verdana=verdana,geneva",
  "content_style": "@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap'); body { font-family: Inter, sans-serif; }"
}

This will:

• Add Inter to the font family dropdown.

• Load the font into the editor content area using content_style.

3. Load the Font in the Page

To ensure full support (including dropdown UI and inline mode), you must also load the font on the page. Add the following line to your page's HTML header (Bubble → Page settings → SEO/Metatags → "Script/meta tags in header"):

<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">

Additional Notes

• This approach works for any Google Font or custom font URL.

• The content_style setting is necessary for the iframe-based Classic mode.

• Page-level font import ensures fonts are rendered correctly in the dropdown and in Inline mode.

For more detail, see the TinyMCE custom font guide.