Custom Fonts

Load custom web fonts into the editor so users can apply your brand typography to any text element.

React

import { useRef } from "react";
import { DragbleEditor, DragbleEditorRef } from "dragble-react-editor";

function BrandFontEditor() {
  const editorRef = useRef<DragbleEditorRef>(null);

  return (
    <DragbleEditor
      ref={editorRef}
      editorKey="db_your_key"
      editorMode="email"
      options={{
        fonts: {
          excludeDefaults: false,
          customFonts: [
            {
              label: "Inter",
              value: "'Inter', sans-serif",
              url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
              weights: [400, 500, 600, 700],
            },
            {
              label: "Playfair Display",
              value: "'Playfair Display', serif",
              url: "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap",
              weights: [400, 700],
            },
            {
              label: "Brand Sans",
              value: "'Brand Sans', sans-serif",
              url: "https://cdn.example.com/fonts/brand-sans.css",
              weights: [400, 600],
            },
          ],
        },
      }}
    />
  );
}

Vue

<template>
  <DragbleEditor
    ref="editorRef"
    editor-key="db_your_key"
    editor-mode="email"
    :options="editorOptions"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { DragbleEditor } from "dragble-vue-editor";

const editorRef = ref<InstanceType<typeof DragbleEditor>>();

const editorOptions = {
  fonts: {
    excludeDefaults: false,
    customFonts: [
      {
        label: "Inter",
        value: "'Inter', sans-serif",
        url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
        weights: [400, 500, 600, 700],
      },
      {
        label: "Brand Sans",
        value: "'Brand Sans', sans-serif",
        url: "https://cdn.example.com/fonts/brand-sans.css",
        weights: [400, 600],
      },
    ],
  },
};
</script>

Angular

import { Component, ViewChild } from "@angular/core";
import { DragbleEditorComponent } from "dragble-angular-editor";

@Component({
  selector: "app-font-editor",
  standalone: true,
  imports: [DragbleEditorComponent],
  template: `
    <dragble-editor
      #editor
      editorKey="db_your_key"
      editorMode="email"
      [options]="editorOptions"
    ></dragble-editor>
  `,
})
export class FontEditorComponent {
  @ViewChild("editor") editorComp!: DragbleEditorComponent;

  editorOptions = {
    fonts: {
      excludeDefaults: true,
      customFonts: [
        {
          label: "Inter",
          value: "'Inter', sans-serif",
          url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap",
          weights: [400, 700],
        },
      ],
    },
  };
}

Vanilla JS

dragble.init({
  containerId: "editor-container",
  editorKey: "db_your_key",
  editorMode: "email",
  options: {
    fonts: {
      excludeDefaults: false,
      customFonts: [
        {
          label: "Inter",
          value: "'Inter', sans-serif",
          url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
          weights: [400, 500, 600, 700],
        },
      ],
    },
  },
});

:::tip Font URL format The url should point to a CSS file that contains @font-face declarations. Google Fonts URLs work directly. For self-hosted fonts, serve a CSS file with the correct @font-face rules. :::

Exclude default fonts

Set excludeDefaults: true to remove all built-in system fonts (Arial, Times New Roman, etc.) and only show your custom fonts:

fonts: {
  excludeDefaults: true,
  customFonts: [
    { label: 'Brand Sans', value: "'Brand Sans', sans-serif", url: '...', weights: [400, 600] },
    { label: 'Brand Serif', value: "'Brand Serif', serif", url: '...', weights: [400, 700] },
  ],
}

Update fonts at runtime

// React
editorRef.current?.editor?.setFonts({
  excludeDefaults: false,
  customFonts: [
    {
      label: "New Font",
      value: "'New Font', sans-serif",
      url: "...",
      weights: [400, 700],
    },
  ],
});

// Vanilla JS
dragble.setFonts({
  excludeDefaults: false,
  customFonts: [
    /* ... */
  ],
});

:::warning Email client support Not all email clients support web fonts. The editor includes the fallback font stack from the value property (e.g., sans-serif). Always specify a web-safe fallback. :::

Configuration reference

Property	Type	Default	Description
excludeDefaults	boolean	false	Hide built-in default system fonts
customFonts	FontDefinition[]	[]	Custom fonts to add

FontDefinition

Property	Type	Required	Description
label	string	Yes	Display name in the font dropdown
value	string	Yes	CSS font-family value (include fallbacks)
url	string	No	URL to CSS file with @font-face declarations
weights	number[]	No	Available font weights (e.g., [400, 700])
defaultFont	boolean	No	Whether this is a default system font

Method reference

Method	Returns	Description
setFonts(config)	void	Replace the custom fonts configuration at runtime
getFonts()	Promise<FontsConfig>	Get the current fonts configuration

Next steps

• Branding Colors -- enforce brand color palettes
• Customize Appearance -- theme the editor UI itself
• External Storage -- host font files on your own CDN