║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Font description: Provide extended formatting options for document content. docs:

• route: /docs/components/font-color-toolbar-button title: Font Color Toolbar Button
• route: /docs/components/font-size-toolbar-button title: Font Size Toolbar Button

---

<ComponentPreview name="font-demo" /> <PackageInfo>

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

</PackageInfo>

Kit Usage

<Steps>

Installation

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

<ComponentSource name="font-kit" />

• 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/plugins/font-kit';

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...FontKit,
  ],
});

</Steps>

Manual Usage

<Steps>

Installation

npm install @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,
  ],
});

Configure Plugins

You can configure individual font plugins with custom options and target elements.

import {
  FontColorPlugin,
  FontBackgroundColorPlugin,
  FontSizePlugin,
  FontFamilyPlugin,
} from '@platejs/basic-styles/react';
import { KEYS } from 'platejs';
import { createPlateEditor } from 'platejs/react';

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    FontColorPlugin.configure({
      inject: {
        nodeProps: {
          defaultNodeValue: 'black',
        },
        targetPlugins: [KEYS.p],
      },
    }),
    FontSizePlugin.configure({
      inject: {
        targetPlugins: [KEYS.p],
      },
    }),
    FontBackgroundColorPlugin.configure({
      inject: {
        targetPlugins: [KEYS.p],
      },
    }),
    FontFamilyPlugin.configure({
      inject: {
        targetPlugins: [KEYS.p],
      },
    }),
  ],
});

• inject.nodeProps.defaultNodeValue: Sets the default font color value.
• inject.targetPlugins: Specifies which element types can receive font styling (affects HTML parsing).

Add Toolbar Button

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

</Steps>

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

tf.backgroundColor.addMark

Set the font background color mark on the selected text.

<API name="tf.backgroundColor.addMark"> <APIParameters> <APIItem name="value" type="string"> The background color value to set (e.g., `'#ff0000'`, `'red'`). </APIItem> </APIParameters> </API>

tf.color.addMark

Set the font color mark on the selected text.

<API name="tf.color.addMark"> <APIParameters> <APIItem name="value" type="string"> The color value to set (e.g., `'#0000ff'`, `'blue'`). </APIItem> </APIParameters> </API>

tf.fontFamily.addMark

Set the font family mark on the selected text.

<API name="tf.fontFamily.addMark"> <APIParameters> <APIItem name="value" type="string"> The font family value to set (e.g., `'Arial'`, `'Times New Roman'`). </APIItem> </APIParameters> </API>

tf.fontSize.addMark

Set the font size mark on the selected text.

<API name="tf.fontSize.addMark"> <APIParameters> <APIItem name="value" type="string"> The font size value to set (e.g., `'16px'`, `'1.2em'`). </APIItem> </APIParameters> </API>

tf.fontWeight.addMark

Set the font weight mark on the selected text.

<API name="tf.fontWeight.addMark"> <APIParameters> <APIItem name="value" type="string"> The font weight value to set (e.g., `'bold'`, `'400'`, `'600'`). </APIItem> </APIParameters> </API>

API

toUnitLess

Convert a font size value to a unitless value.

<API name="toUnitLess"> <APIParameters> <APIItem name="fontSize" type="string"> The font size value to convert. </APIItem> </APIParameters> <APIReturns type="string"> The font size value without units. </APIReturns> </API>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║