---
title: Font
description: Provide extended formatting options for document content.
docs:
  - route: /docs/components/color-dropdown-menu
    title: Color Dropdown Menu
---

<ComponentPreview name="font-demo" />

<PackageInfo>

## Features

- Font size, family, color, background color, and weight.

**Plugins:**

- **`FontFamilyPlugin`**: Change font family using inline elements with a **`font-family`** in the style attribute.
- **`FontSizePlugin`**: Control font size with inline elements having a CSS class or a **`font-size`** in the style attribute.
- **`FontColorPlugin`**: Control font color with inline elements having a **`color`** in the style attribute.
- **`FontBackgroundColorPlugin`**: Control font background color with inline elements having a **`background-color`** in the style attribute.
- **`FontWeightPlugin`**: Control font weight with inline elements having a **`font-weight`** in the style attribute.

</PackageInfo>

## Installation

```bash
npm install @udecode/plate-font
```

## Usage

```tsx
import {
  FontBackgroundColorPlugin,
  FontColorPlugin,
  FontSizePlugin,
} from '@udecode/plate-font/react';

const plugins = [
  // ...otherPlugins,
  FontColorPlugin,
  FontBackgroundColorPlugin,
  FontSizePlugin,
];
```

## Plugins

### FontBackgroundColorPlugin

### FontColorPlugin

### FontFamilyPlugin

### FontSizePlugin

### FontWeightPlugin

## API Components

### useColorDropdownMenu

A behavior hook for the color dropdown menu component.

<APIState>
  <APIItem name="open" type="boolean">
    A boolean indicating whether the dropdown menu is open.
  </APIItem>
  <APIItem name="onToggle" type="function">
    A callback function to toggle the open state of the dropdown menu.
  </APIItem>
</APIState>

<APIReturns>
  <APIItem name="menuProps" type="object">
    The props to be spread on the menu component.
    <APISubList>
      <APISubListItem parent="menuProps" name="open" type="boolean">
        A boolean indicating whether the dropdown menu is open.
      </APISubListItem>
      <APISubListItem parent="menuProps" name="onOpenChange" type="function">
        A callback function to toggle the open state of the dropdown menu.
      </APISubListItem>
    </APISubList>
  </APIItem>
  <APIItem name="buttonProps" type="object">
    The props to be spread on the button component.
    <APISubList>
      <APISubListItem parent="buttonProps" name="pressed" type="boolean">
        A boolean indicating whether the dropdown menu is open.
      </APISubListItem>
    </APISubList>
  </APIItem>
</APIReturns>

### useColorInput

A behavior hook for the color input component.

<APIReturns>
  <APIItem name="inputRef" type="React.Ref<HTMLInputElement>">
    A ref object that should be assigned to the color input element.
  </APIItem>
  <APIItem name="childProps" type="function">
    The props to be spread on the child component that triggers the color
    picker.
    <APISubList>
      <APISubListItem parent="childProps" name="onClick" type="function">
        A callback function to handle the click event of the child component.
      </APISubListItem>
    </APISubList>
  </APIItem>
</APIReturns>

### useColorsCustom

A behavior hook for custom colors in a color picker.

<APIState>
  <APIItem name="updateCustomColor" type="function">
    The callback function to update the custom color.
  </APIItem>
  <APIItem name="value" type="string">
    The current value of the color input.
  </APIItem>
  <APIItem name="setValue" type="function">
    The callback function to update the value of the color input.
  </APIItem>
</APIState>

<APIReturns>
  <APIItem name="inputProps" type="object">
    The props to be spread on the color input element.
    <APISubList>
      <APISubListItem parent="inputProps" name="value" type="string">
        The current value of the color input.
      </APISubListItem>
      <APISubListItem parent="inputProps" name="onChange" type="function">
        A callback function to handle the change event of the color input.
      </APISubListItem>
    </APISubList>
  </APIItem>
  <APIItem name="menuItemProps" type="object">
    The props to be spread on the menu item elements in the color picker.
    <APISubList>
      <APISubListItem parent="menuItemProps" name="onSelect" type="function">
        A callback function to handle the select event of the menu item.
      </APISubListItem>
    </APISubList>
  </APIItem>
</APIReturns>