Vanilla JS Font Picker for Google and System Fonts – jsfontpicker

jsfontpicker is a powerful, user-friendly font picker that supports all Google Fonts and System fonts.

You can search, preview, and apply fonts with keyboard navigation, custom subsets, and saved favorites.

Feature List:

• Favorites: You can save your frequently used fonts for quick access.
• Keyboard Shortcuts: Navigate and select fonts quickly using keyboard controls.
• Dynamic Font Loading: Fonts load only when needed.
• Custom Fonts: Integrate custom fonts beyond Google Fonts and system fonts.
• Fuzzy Search: Find fonts quickly, even with partial names.
• Custom Filters: Filter the font list using subsets (like Latin, Cyrillic, etc.) and categories (Serif, Sans-Serif, etc.).
• Advanced Metrics: Narrow down choices using filters for width, thickness, complexity, and curvature.
• Property Sorting: Arrange fonts by popularity, name, or other visual attributes.
• Font Weight Selection: Choose specific font weights directly within the picker.
• Translations: Available in English, Dutch, German, Spanish, and French.
• Pure ES6: No jQuery dependency.

How to use it:

1. Download and import the jsfontpicker’s files into your HTML page.

<link rel="stylesheet" href="fontpicker.css" />
<script src="fontpicker.iife.js"></script>
// OR
import FontPicker from 'fontpicker.js'

2. To improve performance when loading Google Fonts, add these preconnect links in your HTML head. OPTIONAL but RECOMMENDED.

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />

3. Create a trigger element on your page. This could be a button or an input field. This element, when clicked, will launch the font picker.

<button id="picker"></button>

4. Initialize the font picker. You’ll need to provide the trigger element you just created and, optionally, a set of configuration settings.

const picker = new FontPicker('#picker', {
  // options here
})

5. Available configuration options to customize your font picker.

const picker = new FontPicker('#picker', {
  language: "en", // 'en' | 'nl' | 'de' | 'es' | 'fr'
  container: document.body,
  previewText: null,
  font: "Arial",
  verbose: false,
  variants: true,
  favourites: [],
  saveFavourites: true,
  storageKey: "fp__favourites",
  defaultSubset: "all", // 'all' | 'arabic' | 'bengali' | 'chinese-hongkong' | 'chinese-simplified' | 'chinese-traditional' | 'cyrillic' | 'cyrillic-ext' | 'devanagari' | 'greek' | 'greek-ext' | 'gujarati' | 'gurmukhi' | 'hebrew' | 'japanese' | 'kannada' | 'khmer' | 'korean' | 'latin' | 'latin-ext' | 'malayalam' | 'myanmar' | 'oriya' | 'sinhala' | 'tamil' | 'telugu' | 'thai' | 'tibetan' | 'vietnamese'
  defaultCategories: ["display", "handwriting", "monospace", "sans-serif", "serif"],
  defaultWidth: "all",
  defaultThickness: "all",
  defaultComplexity: "all",
  defaultCurvature: "all",
  sortBy: "popularity",// 'name' | 'popularity' | 'width' | 'thickness' | 'complexity' | 'curvature'
  sortReverse: false,
  googleFonts: null,
  systemFonts: null,
  extraFonts: []
})

6. API methods.

• getConfig: Retrieve the current configuration.
• configure: Modify the picker’s settings.
• setFont: Programmatically select a font.
• open: Display the font picker.
• close: Hide the font picker.
• destroy: Remove the font picker instance.
• font (property): Access the currently selected font.

7. Event handlers.

.on('open', () => ...)
.on('close', () => ...)
.on('pick', (font) => ...)
.on('cancel', () => ...)

Changelog:

03/18/2025

• feat: Add onchange support, use value attribute of input element as default font
• bugfixes