#FONT PICKER REACT INSTALL#
#FONT PICKER REACT DOWNLOAD#

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 the options object is, use #font-picker-main and. pickerId: If you have multiple font pickers on your site, you need to give them unique IDs which must be appended to the pickers' id attributes and the.

options: Object with additional optional parameters:.

defaultFamily: Font that is selected on initialization.

When the user selects a font, it will automatically be downloaded and applied to all HTML elements with the 'apply-font' class.Ĭustomization ParametersThe following parameters can be passed to the constructor of the FontPicker class:Ĭonst fontPicker = new FontPicker(apiKey, defaultFamily, options, onChange) This is where the font picker will be generated.Īdd the class 'apply-font' to all HTML elements you want to apply the selected font to.

#FONT PICKER REACT INSTALL#

Using NPM: If you're using a module bundler like Webpack, you can install the font-picker package using NPM and import it in your code:Ĭreate an empty with id='font-picker' in your HTML file.Include the script in your HTML at the end of the document :

#FONT PICKER REACT DOWNLOAD#

Using script tags: Download the FontPicker.js file from the releases page and save it in your project.You have the following options for installing/using the package: Getting startedTo be able to access the API, you'll need to generate a Google Fonts API key. If you use React, see Font Picker for React. Efficient font previews (full fonts are only downloaded on selection).Automatic font download and generation of the required CSS selectors.Font Picker A simple, customizable font picker allowing users to preview, select and use Google Fonts on your website.

Font picker react