Typeface ​

Description ​

typeface() picks a paragraph's font family group — sans serif, serif, monospace. The button opens a board whose cells are drawn in the very face each one names. Three, and no more.

• You pick a group, not the name of a font (Noto Sans). It is what CSS calls a generic family, which is why this wing does not contain a single font name. The actual font is whatever the host puts on the tokens — see Choosing fonts.
• It is one block attribute (data-nabi-typeface), not a new tag. Same slot as alignment and the drop cap, so they can all sit on one paragraph together.
• The three share one slot. Turning on serif turns monospace off, and pressing the same one again drops the attribute (back to the sans-serif default).
• It applies to paragraphs only (appliesTo: ['p']). The button does not appear in headings, table cells or list items, and the filter strips the attribute if it arrives on one. This is enforced by the filter, not by CSS convention.
• Code blocks are untouched by typeface. A code block (<pre>) is a sibling of the paragraph, not a descendant, so there is no inheritance to override — and the code wing pins monospace in its own sheet. (Inline <code> has no owner wing, so the filter unwraps it; it never survives inside a paragraph.)
• There is no outgoing translation: the attribute goes out and comes back as-is, so round trips are lossless — but a stored value opened without the stylesheet shows the host page's font.

Choosing fonts ​

Each group refers to one token. Swap the token and everything follows.

This docs site puts Google Noto on them and keeps sans serif as the default.

:root {
  --nabi-font: 'Noto Sans KR', 'Noto Sans', system-ui, sans-serif;
  --nabi-font-serif: 'Noto Serif KR', 'Noto Serif', Georgia, serif;
  --nabi-font-mono: 'Noto Sans Mono', ui-monospace, monospace;
}

On :root the page and the editor share one font (variables inherit). Declare them on .nabi instead if you want the editor to differ from the page around it.

Demo ​

npm install nabi-note

import { nabi } from 'nabi-note'
import 'nabi-note/style.css'

nabi.create('#editor', {
  wings: [],
  locale: 'en',
  onChange: (html) => save(html),
})