Font Picker Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The header's Type style button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same TypeFields component and share the block's state, so what you set in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

No font is loaded or downloaded. Each family is a stack of system fonts that already exist on the device: ui-sans-serif and system-ui, ui-serif and Georgia, ui-monospace and a monospace fallback. That keeps the dialog instant, private and accurate, because what you see is what the device will draw. The dialog says "Uses your system fonts" for the same reason. To offer web fonts, add entries to FAMILIES with their font-family stacks, load them with your own @font-face or font service, and wait for them before applying.

The specimen's style written as a font shorthand (weight, size over line height, family stack) and a letter-spacing line, for example font: 500 18px/1.5 ui-serif, Georgia, serif;. Copy puts both lines on the clipboard, which is the only thing the page touches, and says "Copied" to screen readers. If the browser refuses, for instance on a page not served over HTTPS, the button says it couldn't copy.

Everything. Apply to document restyles the drawn page in local state and says so in a polite status message; nothing is stored. In your app save the five choices (family id, weight, size, line height, letter spacing) with the document or the user's preferences in apply, and map them to the CSS variables or classes your editor uses. Reset to the saved values when the dialog closes, as Cancel does here.

Yes. The real dialog is named by its title and described by its sentence, focus is trapped while it is open, and Escape, Cancel and the close button return focus to the header button. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it and its close button close it and put focus back on the header button. The families are a radio group moved with the arrow keys, the weight and line height are toggle groups, and the size slider moves with the arrow keys, Home and End and says its value in pixels. The specimen is decoration and hidden from assistive technology; the CSS line states the values in text.

The specimen moves above the controls, so you see the effect of each change as you scroll the controls beneath it. The copy shown on load docks to the foot of the page as a bottom sheet with Apply to document pinned at the bottom. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.