Font Picker

ProNew

Choose a font family from a searchable list where every option is drawn in its own typeface, with category filters, a live preview line, optional weights, a hook to load web fonts on demand and an opt-in list of fonts installed on the computer.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/font-picker

Usage

The built-in list is thirteen system fonts, which preview without loading anything. Pass your own fonts for web fonts and use onPreview to load each one when it is first highlighted (the browser only downloads what is used).

Props

Prop	Type	Default	Description
`value` / `onChange`	`string`	-	The family name.
`label`	`string`	-	Accessible name of the trigger; the current font is added.
`fonts`	`{ family, category?, stack?, weights? }[]`	`SYSTEM_FONTS`	The list.
`previewText`	`string`	pangram	The line under the list.
`onPreview`	`(font) => void`	-	Once per font, when first highlighted.
`weight`, `onWeightChange`	`number`	-	Show a weight select for fonts with several weights.
`localFonts`	`boolean`	`false`	Adds a button to list fonts installed on this computer.

Accessibility

The trigger is a combobox button with an accessible name made of the label and the current font. The list is the cmdk listbox: type to filter, Up and Down to move, Enter to choose, Escape to close with focus back on the trigger.
Fonts are drawn in their own typeface for sighted people; the option text is still the plain family name for screen readers.
Category filters are toggle buttons with aria-pressed. The preview line is decorative (aria-hidden).
Listing installed fonts needs a permission prompt; a refusal or a missing API is explained in a role="alert" line.

Testing

The component ships with a Testing Library test (font-picker.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/font-picker

Usage

Props

Prop	Type	Default	Description
`value` / `onChange`	`string`	-	The family name.
`label`	`string`	-	Accessible name of the trigger; the current font is added.
`fonts`	`{ family, category?, stack?, weights? }[]`	`SYSTEM_FONTS`	The list.
`previewText`	`string`	pangram	The line under the list.
`onPreview`	`(font) => void`	-	Once per font, when first highlighted.
`weight`, `onWeightChange`	`number`	-	Show a weight select for fonts with several weights.
`localFonts`	`boolean`	`false`	Adds a button to list fonts installed on this computer.

Accessibility

The trigger is a combobox button with an accessible name made of the label and the current font. The list is the cmdk listbox: type to filter, Up and Down to move, Enter to choose, Escape to close with focus back on the trigger.
Fonts are drawn in their own typeface for sighted people; the option text is still the plain family name for screen readers.
Category filters are toggle buttons with aria-pressed. The preview line is decorative (aria-hidden).
Listing installed fonts needs a permission prompt; a refusal or a missing API is explained in a role="alert" line.

Testing

The component ships with a Testing Library test (font-picker.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.