Font picker websire1/12/2023 ![]() ![]() apiKey (required): Google API key (can be generated here).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 HTML elements of the "apply-font" class. Import FontPicker from 'font-picker-vue' Īdd class="apply-font" to all elements you want to apply the selected font to. Import the component to your Vue code: import Vue from 'vue' Install the package using NPM: npm install font-picker-vue This is the Vue component for the Font Picker package. Efficient font previews (previews are loaded dynamically and full fonts are only downloaded on selection).Automatic font download and generation of the required CSS styles.Suggestions and contributions are always welcome! Please discuss larger changes via issue before submitting a pull request.A simple, customizable font picker allowing users to preview, select, and use Google Fonts on your website. View the rendered component on localhost:3000.Generate the library bundle: yarn start.Clone this repository: git clone REPO_URL.setOnChange(onChange: (font: Font) => void): Update the onChange function after the font picker has been initialized.setActiveFont(fontFamily: string): Sets the provided font as the active font.getActiveFont(): Returns the font object of the currently active font.removeFont(fontFamily: string): Removes the specified font from the font list.addFont(fontFamily: string, index?: number): Adds the specified font to the font list (at the given index).getFonts(): Returns a map of all font names/objects.The FontPicker class exposes the following functions: onChange: Function to execute whenever the active font is changed.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 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.The following parameters can be passed to the constructor of the FontPicker class: const fontPicker = new FontPicker(apiKey, defaultFamily, options, onChange) When the user selects a font, it will automatically be downloaded and applied to all HTML elements with the "apply-font" class. Īdd the class "apply-font" to all HTML elements you want to apply the selected font to. This is where the font picker will be generated. 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 : 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: To 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.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |