TYPOGRAPHY FONT PICKER UPDATE

Generate the library bundle: yarn start.

Clone this repository: git clone REPO_URL.

Default: 'alphabet'Ĭurrently, only the activeFontFamily, onChange and sort props are reactive. Possible values: 'alphabet', 'popularity'.

sort: Sorting attribute for the font list.

limit: Maximum number of fonts to display in the list (the least popular fonts will be omitted).

Example: If font => ().startsWith('m'), only fonts whose names begin with 'M' will be in the list

filter: Function which must evaluate to true for a font to be included in the list.variants: Array of variants which the fonts must include and which will be downloaded on font selection.scripts: Array of scripts which the fonts must include and which will be downloaded on font selection.Possible values: 'sans-serif', 'serif', 'display', 'handwriting', 'monospace'. categories: Array of font categories to include in the list.families: If only specific fonts shall appear in the list, specify their names in an array.Example: If pickerId='main', use className='apply-font-main' pickerId: If you have multiple font pickers on your site, you need to give them unique IDs which must be provided as a prop and appended to the.

TYPOGRAPHY FONT PICKER UPDATE

This function should update activeFontFamily in the component state onChange: Function which is executed when the user changes the active font.Should be stored in the component state and updated using onChange activeFontFamily: Font that should be selected in the font picker and applied to the text.The following props can be passed to the FontPicker component: When the user selects a font, it will automatically be downloaded and applied to all elements with the 'apply-font' class. Applying the selected fontĪdd the class 'apply-font' to all JSX elements you want to apply the selected font to.

Typography font picker