An open source, free (as in beer), versatile, flexible and lightweight Javascript Font Picker Component for System fonts, Google fonts and custom (woff/ttf) fonts. Features dynamic font loading, favourites, keyboard navigation, fuzzy search, advanced metrics filters, property sorting and much more. Available in multiple languages.
Please visit jsfontpicker.com for more detailed documentation and extensive demo's.
- ❤️ Favourites
- ⌨️ Keyboard shortcuts
- ⚡ Dynamic font loading
- 🔤 Custom font support
- 🔎 Fuzzy search
- 📐 Advanced metrics filters
- 📶 Property sorting
- 🇳🇱 Translations for English, Dutch, German, Spanish and French
- 💪 No JQuery, just pure ES6
👆 Try it out now!
Light | Dark | |
---|---|---|
Button | ![]() |
![]() |
Dialog | ![]() |
![]() |
The FontPicker requires a small stylesheet. Please include the it like this:
<link rel="stylesheet" href="fontpicker.css" />
It is also highly recommended to include a preconnect to Google fonts:
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
Now, depending on your environment, choose one of the following:
- IIFE Bundle → When using vanilla JavaScript, without ES modules
- ESM Bundle → When using ES modules or a bundler
Please import the IIFE script using a script
tag in your HTML:
<script src="fontpicker.iife.js"></script>
This exposes FontPicker
and FontPicker.FontLoader
globally (on window).
Please import the ESM bundle using the import
directive in your script:
import FontPicker from 'fontpicker.js'
This allows you to use FontPicker
and FontPicker.FontLoader
directly.
To create a font picker, first create a button or input element:
<button id="picker"></button>
Next instantiate the FontPicker, passing the element and an (optional) configuration:
const picker = new FontPicker('#picker', {
language: 'en',
font: 'Open Sans',
defaultSubset: 'latin',
})
The picker's configuration can be changed after initialization. This is done by calling .configure({...})
on the element:
picker.configure({
language: 'nl',
})
The picker's various methods and properties can also be accessed directly on the element:
// Set the current font
picker.setFont('Roboto:800')
// Handle events
picker.on('pick', (font) => { ... })
// Open the FontPicker, which returns a promise!
const font = await picker.open()
For all methods and properties, please view the documentation.
To install dependencies:
bun|deno|npm|pnpm|yarn install
To run:
bun|deno|npm|pnpm|yarn run dev
This component is released under the MIT license. It is simple and easy to understand and places almost no restrictions on what you can do with the code. More Information
The development of this component was funded by Zygomatic.