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 { PexelizeEditor, PexelizeEditorRef } from '@pexelize/react-editor';

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

  return (
    <PexelizeEditor
      ref={editorRef}
      editorKey="pk_your_key"
      editorMode="email"
      options={{
        customFonts: {
          excludeDefaults: false,
          fonts: [
            {
              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>
  <PexelizeEditor
    ref="editorRef"
    editor-key="pk_your_key"
    editor-mode="email"
    :custom-fonts="fontsConfig"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { PexelizeEditor } from '@pexelize/vue-editor';

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

const fontsConfig = {
  excludeDefaults: false,
  fonts: [
    {
      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 { PexelizeEditorComponent } from '@pexelize/angular-editor';

@Component({
  selector: 'app-font-editor',
  standalone: true,
  imports: [PexelizeEditorComponent],
  template: `
    <pexelize-editor
      #editor
      editorKey="pk_your_key"
      editorMode="email"
      [customFonts]="fontsConfig"
    ></pexelize-editor>
  `,
})
export class FontEditorComponent {
  @ViewChild('editor') editorComp!: PexelizeEditorComponent;

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

Vanilla JS

pexelize.init({
  containerId: 'editor-container',
  editorKey: 'pk_your_key',
  editorMode: 'email',
  options: {
    customFonts: {
      excludeDefaults: false,
      fonts: [
        {
          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],
        },
      ],
    },
  },
});

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:

customFonts: {
  excludeDefaults: true,
  fonts: [
    { 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,
  fonts: [
    { label: 'New Font', value: "'New Font', sans-serif", url: '...', weights: [400, 700] },
  ],
});

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

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.

Method reference

Method	Returns	Description
setFonts(config)	void	Replace the custom fonts configuration at runtime

Next steps

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