From zbeyens. The source code is available on GitHub.

Plate
PlatePliteEditorsTemplates
GitHub16kGitHub
DiscordDiscord
    • Stream
    • Copilot
  • Discussion
    • Comments
    • Suggestion
    • Basic Blocks
      • Blockquote
      • Heading
      • Horizontal Rule
    • Callout
    • Code Block
    • Column
    • Date
    • Equation
    • Link
    • List Classic
    • Media
    • MentionElement
    • Table
    • Table of Contents
    • Footnote
    • Toggle
  • Marks
    • Bold
    • Italic
    • Underline
    • Code
    • Highlight
    • Keyboard Input
    • Strikethrough
    • Subscript
    • Superscript
      • Font
      • Line Height
      • Text Align
    • Indent
    • List
      • Exit Break
      • Single Block
      • Trailing Block
    • Autoformat
    • Block Menu
    • Block Placeholder
    • Combobox
      • Emoji
      • MentionElement
      • Slash Command
    • Cursor Overlay
    • Drag & Drop
    • Navigation Feedback
    • Tabbable
    • Toolbar
    • Yjs
    • Multi SelectEditor
    • CSV
    • DOCX
    • HTML
    • Markdown

Font

PreviousNext

Provide extended formatting options for document content.

Font Color Toolbar ButtonFont Size Toolbar Button
Loading…
SuperscriptLine Height

On This Page

FeaturesPluginsKit UsageInstallationAdd KitManual UsageInstallationAdd PluginsConfigure The Color DefaultAdd Toolbar ButtonPluginsFontBackgroundColorPluginFontColorPluginFontFamilyPluginFontSizePluginFontWeightPluginTransformseditor.update.backgroundColor.seteditor.update.color.seteditor.update.fontFamily.seteditor.update.fontSize.seteditor.update.fontWeight.setAPItoUnitLess
Build your editor
Production-ready AI template and reusable components.
Get all-access

Features

  • Apply font styling to selected text including size, family, color, background color, and weight.
  • Supports custom font families, sizes, colors, and weights.

Plugins

  • FontBackgroundColorPlugin: Control background color with background-color style
  • FontColorPlugin: Control font color with color style
  • FontFamilyPlugin: Change font family using inline elements with font-family style
  • FontSizePlugin: Control font size with CSS class or font-size style
  • FontWeightPlugin: Control font weight with font-weight style
Report an issue

Kit Usage

Installation

The fastest way to add font styling functionality is with the FontKit, which includes pre-configured font plugins with their Plate UI components.

'use client';
 
import {
  FontBackgroundColorPlugin,
  FontColorPlugin,
  FontFamilyPlugin,
  FontSizePlugin,
} from '@platejs/basic-styles/react';
 
export const FontKit = [
  FontColorPlugin.configure({
    inject: {
      nodeProps: {
        defaultNodeValue: 'black',
      },
    },
  }),
  FontBackgroundColorPlugin,
  FontSizePlugin,
  FontFamilyPlugin,
];
'use client';
 
import {
  FontBackgroundColorPlugin,
  FontColorPlugin,
  FontFamilyPlugin,
  FontSizePlugin,
} from '@platejs/basic-styles/react';
 
export const FontKit = [
  FontColorPlugin.configure({
    inject: {
      nodeProps: {
        defaultNodeValue: 'black',
      },
    },
  }),
  FontBackgroundColorPlugin,
  FontSizePlugin,
  FontFamilyPlugin,
];
  • Includes all font plugins (FontColorPlugin, FontBackgroundColorPlugin, FontSizePlugin, FontFamilyPlugin) with sensible defaults.

Add Kit

Add the kit to your plugins:

import { createPlateEditor } from "platejs/react";
import { FontKit } from "@/components/editor/font";
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...FontKit,
  ],
});
import { createPlateEditor } from "platejs/react";
import { FontKit } from "@/components/editor/font";
 
const editor = createPlateEditor({

Manual Usage

Installation

pnpm add @platejs/basic-styles
pnpm add @platejs/basic-styles

Add Plugins

Include the font plugins in your Plate plugins array when creating the editor.

import {
  FontBackgroundColorPlugin,
  FontColorPlugin,
  FontFamilyPlugin,
  FontSizePlugin,
} from "@platejs/basic-styles/react";
import { createPlateEditor } from "platejs/react";
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    FontColorPlugin,
    FontBackgroundColorPlugin,
    FontFamilyPlugin,
    FontSizePlugin,
  ],
});
import {
  FontBackgroundColorPlugin,
  FontColorPlugin,
  FontFamilyPlugin,
  FontSizePlugin,
} from "@platejs/basic-styles/react";
import { createPlateEditor } from "platejs/react";
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    FontColorPlugin,
    FontBackgroundColorPlugin,
    FontFamilyPlugin,
    FontSizePlugin,
  ],
});

Configure The Color Default

Font plugins register string-valued text marks, so they follow the selected text instead of a block target list. Configure render props only when your UI needs a different default.

import { FontColorPlugin } from "@platejs/basic-styles/react";
import { createPlateEditor } from "platejs/react";
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    FontColorPlugin.configure({
      inject: {
        nodeProps: {
          defaultNodeValue: "currentColor",
        },
      },
    }),
  ],
});

FontColorPlugin defaults to black. HTML parsers read font styles directly onto text properties; block target injection does not constrain text marks.

Add Toolbar Button

You can add FontColorToolbarButton and FontSizeToolbarButton to your Toolbar to control font color and size.

Plugins

FontBackgroundColorPlugin

Plugin for font background color formatting. Applies background-color style to selected text.

FontColorPlugin

Plugin for font color formatting. Applies color style to selected text.

FontFamilyPlugin

Plugin for font family formatting. Applies font-family style to selected text.

FontSizePlugin

Plugin for font size formatting. Applies font-size style to selected text.

FontWeightPlugin

Plugin for font weight formatting. Applies font-weight style to selected text.

Transforms

editor.update.backgroundColor.set

Set the font background color mark on the selected text.

Parameters

    The background color value to set (e.g., '#ff0000', 'red').

editor.update.color.set

Set the font color mark on the selected text.

Parameters

    The color value to set (e.g., '#0000ff', 'blue').

editor.update.fontFamily.set

Set the font family mark on the selected text.

Parameters

    The font family value to set (e.g., 'Arial', 'Times New Roman').

editor.update.fontSize.set

Set the font size mark on the selected text.

Parameters

    The font size value to set (e.g., '16px', '1.2em').

editor.update.fontWeight.set

Set the font weight mark on the selected text.

Parameters

    The font weight value to set (e.g., 'bold', '400', '600').

API

toUnitLess

Convert a font size value to a unitless value.

Parameters

    The font size value to convert.

Returnsstring

    The font size value without units.

plugins: [
// ...otherPlugins,
...FontKit,
],
});
import { FontColorPlugin } from "@platejs/basic-styles/react";
import { createPlateEditor } from "platejs/react";
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
FontColorPlugin.configure({
inject: {
nodeProps: {
defaultNodeValue: "currentColor",
},
},
}),
],
});