Tiptap font family: save the selected typeface and supply its font

An equipment handout might use a serif face for a short quotation while retaining the normal body font for instructions. Setting a font on the whole editor container would change both. A saved inline choice lets the author target the quotation and keep the instruction text as it was.

Add the text-style support once

In an existing Tiptap 3 application using compatible packages:

import { TextStyle, FontFamily }
  from '@tiptap/extension-text-style';

const handoutFonts = [TextStyle, FontFamily];

Include those entries in the editor's existing extension list, alongside its base document schema. If the application already uses TextStyleKit, inspect that configuration first: the official documentation says the kit includes FontFamily. Avoid registering another copy of the same support.

The TextStyle mark carries inline styling. It is separate from the TextAlign extension, which stores a block's alignment. Choosing a typeface should not center the paragraph or rewrite its words.

Limit the menu to fonts the reader can receive

With editor referring to the initialized handout, use deliberate menu values:

const handoutFontChoices = new Set([
  'Georgia, serif',
  'Arial, sans-serif'
]);

function chooseHandoutFont(family) {
  if (!handoutFontChoices.has(family)) return false;
  return editor.chain().focus()
    .setFontFamily(family).run();
}

function useDefaultHandoutFont() {
  return editor.chain().focus()
    .unsetFontFamily().run();
}

Select the quotation before choosing its font. An empty selection can establish a style for subsequent typing, so test that behavior in the toolbar you provide. Restore the default when the author returns to ordinary instructions if that is the intended result.

These example stacks include generic fallbacks. They do not ensure that Georgia or Arial exists on every receiving device. A custom webfont needs an appropriate font-loading arrangement and permission to distribute it. A family name saved in a span does not embed the font file or make a remote font request succeed.

Inspect the saved choice and the reader's fallback

After applying the quotation's font, inspect editor.getHTML() or the application's chosen JSON representation. Confirm that the quotation carries the intended font-family value and that the following instruction retains its own styling. HTML uses inline text styling, commonly on a span; do not compare complete HTML strings just to check quotation marks or equivalent CSS serialization.

Save and reopen the same record through the normal application path. Then inspect the reader page's computed font and load behavior. If the saved attribute exists but the face differs, investigate the stylesheet, fallback stack, and font request. If the attribute disappeared, inspect the editor selection and storage or sanitizing step first.

Finally, read the handout on a narrow screen with its fallback font. Line breaks may change even when the font-family value survives. Keep the quotation readable and verify that equipment names, units, and safety instructions still fit without relying on one device's installed fonts.