Font Picker Command Menu Block for React

So you can see it without a click. On load the menu is the Command with its specimen band drawn inline under a picture of the editor, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so the weight you chose in the copy is the one the dialog opens with. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

None are downloaded. Each stack is a CSS font-family list of system and generic families, such as ui-rounded, "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", Calibri, sans-serif, and the browser picks the first one the device has. The row says which family the stack tries first and the specimen says what it falls back to, so on a device without Charter the Humanist serif is drawn in Cambria or in the generic serif. That is also why a font may not have all five weights: a family without a 300 is drawn in its nearest weight. In your app swap the stacks for your own, and load a web font with font-display: swap if you want one.

The specimen follows the highlighted row, in the weight and style set above the list; the weights and the italic toggle change only the specimen. Enter sets the drawn document's font, weight and style together, puts a tick and the words ", in the document" on that row, names the choice on the status line and closes the menu with focus on the field. The document's title and text and the font name in the toolbar are drawn in what you chose.

It is the block's own: a pangram for the specimen and two sentences for the document, written for this demo and typed in the block. Nothing is read from your documents, and in your app the specimen can show the first line of the selected text instead.

All of it. The stacks, the weight, the italic flag and the document's style are typed state in the block; nothing is saved and nothing leaves the page. In your app build STACKS from your own list, make pick write the family, weight and style to the selection or to the document's defaults, and keep the specimen as the preview.

Yes. Type to search by name, family or word ("serif", "mono", "rounded", "Rockwell"), the arrow keys move through the fonts, Enter uses the highlighted one and Escape closes the menu and puts focus on the field; Tab reaches the weights and the italic toggle, which sit above the input. Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself. The specimen is a labelled region that is not read out as you move; the rows name each font.

The editor goes. The specimen shrinks to its one large line, the weights and the italic toggle stay (the toggle shows only its icon), and the copy shown on load docks to the top of the page at full width, so the keyboard does not cover the foot; the key hints go and the count stays. The real dialog keeps the Command dialog's own phone layout.