Font Family

Adds toolbar and context buttons for inline font family. Applies font-family as a <span> style on the selected text, or maps fonts to CSS classes when classes is set.

Select text, click Font in the toolbar (before More), and pick a font from the dropdown. Use Remove font to clear formatting.

Load the bundle

<script src="/assets/redactor/redactor.js"></script>
<script src="/assets/redactor/plugins/font-family/font-family.js"></script>

Initialization

const app = Redactor('#entry', {
    plugins: ['fontFamily']
});

Options

items (string[] | false)
- default false
- Font family names shown in the dropdown. false uses the built-in list: Arial, Helvetica, Georgia, Times New Roman, monospace.
classes (string[] | false)
- default false
- When set to a non-empty array, switches to class-based mode. Each entry is a CSS class name applied to a <span> instead of an inline font-family style.
icon (string)
- SVG icon HTML for the toolbar and context buttons.

Redactor('#entry', {
    plugins: ['fontFamily'],
    fontFamily: {
        items: ['Georgia', 'Times New Roman', 'Arial', 'Helvetica', 'monospace']
    }
});

Language strings

en: {
    fontFamily: {
        title: 'Font',
        remove: 'Remove font'
    }
}

Events

This plugin does not emit events.

API

set

Applies font family formatting to the current selection and closes the dropdown. Pass the same params object used by app.inline.set.

app.fontFamily.set({ tag: 'span', styles: { 'font-family': 'Georgia' } });

remove

Clears inline font family (or font classes in class mode) from the selection and closes the dropdown.

app.fontFamily.remove();