Setup a PHP installation with the GD image processing library. Note: most users shouldn't need to rebuild the font previews, but this section is included for convenience if you need to grab the latest fonts or edit the previews. Or, for a different font picker following an on demand approach, check out: įont-picker-react requires a Google API key, and works best at the default font limit of 50 (fonts to choose from). If you're looking for a lighter weight option, you can use react-fontpicker-ts-lite instead: Only a subset of this is served depending on the client's device pixel ratio: The big trade-off of this approach is that the component's bundle is quite large due to all the font image previews (~14 MB).
(The previously selected font link is not removed.) The plugin enables the following features in the rich-text editor: FontFamily Allows to change the font family by applying inline elements with a font.No requests are made to the Google fonts API unless the font picker is set to autoload, in which case the currently selected font is appended to the page header. Once the dropdown select is opened, all the preview image files are retrieved enabling smooth scrolling and searching. The fonts are split across many image files for faster initial preview. The font picker previews work by loading font preview image files in CSS. The font preview generation PHP script downloads font files to /font-cache and builds font image previews to /font-preview. esbuild) to /dist with type definitions generated via tsc according to. The font picker component itself builds via tsup (i.e. The live demo is a Vite app you can run yourself via npm run dev and which builds to /docs. The font picker project lives in this Turborepo monorepo at packages/fontpicker/ See css classnames in: packages/fontpicker/src/components/FontPicker.css Project structure Font Picker React Examples and Templates Use this online font-picker-react playground to view and fork font-picker-react example apps and templates on CodeSandbox. Import FontPicker from 'react-fontpicker-ts' import 'react-fontpicker-ts/dist/index.css' Styling
0 kommentar(er)
