A font picker component supporting Google and system fonts, powered by Bootstrap.
- ❤️ 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 |  |
 |
Although the FontPicker is built on Bootstrap, it does require a tiny stylesheet. Please include 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 the FontPicker and FontLoader classes (on window).
Please import the ESM bundle using the import directive in your script:
import { FontPicker, FontLoader } from 'fontpicker.js'This allows you to use FontPicker and FontLoader directly.
To create a font picker, first create a button element:
<button id="picker"></button>Next instantiate the FontPicker, passing a button element and (optional) configuration:
const button = document.querySelector('#picker')
const picker = new FontPicker(button, {
language: 'en',
font: 'Open Sans',
defaultSubset: 'latin',
})The picker's configuration can be changed after initialization. This is done by calling .initialize({...}) 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 installTo run:
bun|deno|npm|pnpm|yarn run dev