![Meet Socket at BlackHat and DEF CON in Las Vegas](https://cdn.sanity.io/images/cgdhsj6q/production/4a3876139ffd3878bb3e7800a14cf4044245dca7-1080x834.jpg?w=400&fit=max&auto=format)
Security News
Meet Socket at BlackHat and DEF CON in Las Vegas
Come meet the Socket team at BlackHat and DEF CON! We're sponsoring some fun networking events and we would love to see you there.
font-picker
Advanced tools
Readme
A simple, customizable font picker allowing users to preview, select and use Google Fonts on your website.
→ Demo
If you use React, see Font Picker for React.
To be able to access the API, you'll need to generate a Google Fonts API key.
You have the following options for installing/using the package:
FontPicker.js
file from the releases page and save it in your project. Include the script in your HTML at the end of the document <body>
:<script src="path/to/FontPicker.js"></script>
<script>
const fontPicker = new FontPicker(
YOUR_API_KEY, // Google API key
"Open Sans", // Default font
{ limit: 30 }, // Additional options
);
</script>
font-picker
package using NPM and import it in your code:npm install font-picker
import FontPicker from "font-picker";
const fontPicker = new FontPicker(
YOUR_API_KEY, // Google API key
"Open Sans", // Default font
{ limit: 30 }, // Additional options
);
Create an empty <div>
with id="font-picker"
in your HTML file. This is where the font picker will be generated.
<div id="font-picker"></div>
Add the class "apply-font"
to all HTML elements you want to apply the selected font to.
When the user selects a font, it will automatically be downloaded and applied to all HTML elements with the "apply-font"
class.
The following parameters can be passed to the constructor of the FontPicker
class:
const fontPicker = new FontPicker(apiKey, defaultFamily, options, onChange);
apiKey
(required): Google API keydefaultFamily
: Font that is selected on initialization. Default: "Open Sans"
options
: Object with additional optional parameters:
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 .apply-font
class names. Example: If the options object is { pickerId: "main" }
, use #font-picker-main
and .apply-font-main
families
: If only specific fonts shall appear in the list, specify their names in an array. Default: All font familiescategories
: Array of font categories to include in the list. Possible values: "sans-serif", "serif", "display", "handwriting", "monospace"
. Default: All categoriesscripts
: Array of scripts which the fonts must include and which will be downloaded on font selection. Default: ["latin"]
. Example: ["latin", "greek", "hebrew"]
(see all possible values)variants
: Array of variants which the fonts must include and which will be downloaded on font selection. Default: ["regular"]
. Example: ["regular", "italic", "700", "700italic"]
(see all possible values)filter
: Function which must evaluate to true
for a font to be included in the list. Default: font => true
. Example: If font => font.family.toLowerCase().startsWith("m")
, only fonts whose names begin with "M" will be in the listlimit
: Maximum number of fonts to display in the list (the least popular fonts will be omitted). Default: 50
sort
: Sorting attribute for the font list. Possible values: "alphabet", "popularity"
. Default: "alphabet"
onChange
: Function to execute whenever the active font is changedThe FontPicker
class exposes the following functions:
getFonts()
: Returns a map of all font names/objectsaddFont(fontFamily: string, index?: number)
: Adds the specified font to the font list (at the given index)removeFont(fontFamily: string)
: Removes the specified font from the font listgetActiveFont()
: Returns the font object of the currently active fontsetActiveFont(fontFamily: string)
: Sets the provided font as the active fontsetOnChange(onChange: (font: Font) => void)
: Update the onChange
function after the font picker has been initializedRequirements: Node.js, Yarn
git clone REPO_URL
yarn
yarn start
localhost:3000
Suggestions and contributions are always welcome! Please discuss larger changes via issue before submitting a pull request.
FAQs
Font selector component for Google Fonts
We found that font-picker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Come meet the Socket team at BlackHat and DEF CON! We're sponsoring some fun networking events and we would love to see you there.
Security News
Learn how Socket's 'Non-Existent Author' alert helps safeguard your dependencies by identifying npm packages published by deleted accounts. This is one of the fastest ways to determine if a package may be abandoned.
Security News
In July, the Python Software Foundation mounted a quick response to address a leaked GitHub token, elected new board members, and added more members to the team supporting PSF and PyPI infrastructure.