Font Family

Type: Mark · Category: Style

Font Family allows users to apply different typefaces to selected content. Renders as a <span> element with an inline font-family CSS style in HTML output.

Demo

Installation

import { FontFamily } from "@arkpad/extension-font-family";

Commands

The extension registers two commands for managing font families:

// Applies the specified font family typeface to the selected text range
editor.runCommand("setFontFamily", "Inter");
editor.runCommand("setFontFamily", "Courier New, monospace");

// Resets the font family of the selection back to the editor default
editor.runCommand("unsetFontFamily");

Chaining Commands

You can chain commands to set a font family and immediately focus the editor:

editor.chain().focus().setFontFamily("Arial, sans-serif").run();

Active State

Check if a specific font family is active on the selection:

const isSerifActive = editor.isActive("fontFamily", { fontFamily: "Georgia, serif" });

Configuration

Options

Name	Type	Default	Description
`HTMLAttributes`	`Record<string, any>`	`{}`	Key-value pairs of attributes to render on the generated `<span>` wrapper element.

FontFamily.configure({
  HTMLAttributes: {
    class: "custom-font-wrapper",
  },
});