Javascript Font Picker

Contents

• Demo's
• Features
• Download
• Getting started
  • IIFE Bundle
  • ESM Bundle
• Options
  • Configuration
• Methods
  • Retrieving selected font
• Events
• The Font object
• Customization
  • Color scheme
  • CSS variables
• Tips
• Types
• License

JS Font Picker Demo's

Play with JSFontPicker on CodePen.

Default configuration. The Font Picker shows a list of default system fonts, as well as all available Google fonts. Users can select both a font-family and a font-variant (font weight- and style).

<input id="font1" type="text">

<script>
new FontPicker('#font1')
.on('pick', font => {
  console.log(font)
})
</script>

Verbose vs Non-verbose

By default, a font variant is displayed as Arial:400, Open Sans:400i or Poppins:700. When you enable the verbose option, the selected font will instead be displayed as Arial, Open Sans Normal Italic (400i) or Poppins Bold (700) respectively.

Variants vs Non-variants

The variants configuration variable determines whether users can only pick a font, or a font and a specific variant of that font.

No system fonts, subset of Google fonts, disabled variant-selection

This Font Picker shows no system fonts. The list of Google fonts the user can choose from is confined. Users can only select a font-family, font-variant selection is disabled (variants: false).

<input id="font2" type="text" value="Indie Flower">

<script>
new FontPicker('#font4', {
  variants: false,
  systemFonts: [],
  googleFonts: [
    'Abel', 'Advent Pro', 'Changa', 'Eczar', 'Gloria Hallelujah',
    'Indie Flower', 'Press Start 2P', 'Slackey', 'Yeon Sung'
  ],
})
.on('pick', font => {
  console.log(font)
})
</script>

const extraFonts = [
  { name: 'Action Man', variants: ['400','400i'], url: '/fonts/Action%20Man.woff' },
  { name: 'Aether Fox', variants: ['400','400i'], url: '/fonts/Aether%20Fox.woff' },
  { name: 'Astrolyte', variants: ['400','400i'], url: '/fonts/Astrolyte.ttf' },
  { name: 'Bauer', variants: ['400','400i'], url: '/fonts/Bauer.ttf', subsets: ['latin','latin-ext'] },
  { name: 'Gyparody', variants: ['400','400i'], url: '/fonts/Gyparody.woff' },
  { name: 'Heaven', variants: ['400','400i'], url: '/fonts/Heaven.woff', subsets: ['latin','latin-ext'] },
  { name: 'Space Toaster', variants:['400','400i'], url: '/fonts/Space%20Toaster.woff'}
]

new FontPicker('#font5', {
  variants: true,
  verbose: false,
  googleFonts: [], // No Google Fonts
  extraFonts: extraFonts
})

JS Font Picker Features

• Quickly preview and select any Google font family.
• Lazy loading of fonts as they come into view.
• Optionally present system and local fonts (.woff, .otf, .ttf) as well.
• Optionally choose font variant: font weight and font style.
• Find fonts by name, language and category.
• Advanced metrics filters: width, thickness, complexity, curvature.
• Property sorting: by name, by popularity, by width, by thickness, by complexity, by curvature.
• Users can favor fonts; favored fonts are listed on top of the font list.
• Editable sample text (default: The quick brown fox jumps over the lazy dog).
• Keyboard navigation to the extend that the component can be fully controlled by keyboard only (mouse/touch is optional):
  • Spacebar opens the modal (when element is focused).
  • Up/Down cursor keys navigate through options.
  • Left/Right cursor keys navigate through variants.
  • i toggles italics in an active item.
  • Enter selects on option, double-clicking does too.
  • Esc closes the picker.
• Open Source and Free.
• Zero dependencies.
• Light weight (168kB minified, 38.5kB minified and gzipped). This includes meta information about all Google Fonts.
• Easy to use and customize.
• Touch friendly.
• Light and dark theme.

Download JS Font Picker

Download
Please visit our GitHub repository to download JSFontPicker.

Getting Started with JS Font Picker

JSFontPicker requires a tiny stylesheet. Please include it like this:

<link rel="stylesheet" href="fontpicker.min.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

IIFE Bundle

Import the IIFE script using a script tag in your HTML:

<script src="fontpicker.iife.min.js"></script>

This exposes the FontPicker class (on the global window object).

ESM Bundle

Import the ESM bundle using the import directive in your script:

import FontPicker from 'fontpicker.min.js'

This allows you to use FontPicker directly.

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="/css/fontpicker.min.css">
</head>
<body>
  <button id="demoButton"></button>

  <script type="module">
    import FontPicker from '/js/fontpicker.min.js'
    new FontPicker('#demoButton')
  </script>
</body>
</html>

JS Font Picker Options

Configure the FontPicker by passing the element to bind it to and a configuration object. The element to bind to (first argument to FontPicker constructor) can either be:

• A DOM element (HTMLElement)
• A DOM selector (string)

The Font Picker can be bound to any HTML element (<div>, <input> etc). When bound to an <input> element that's inside a <form>, the selected font can be submitted (GET or POST) to a server.

Configuration

const picker = new FontPicker(element, {
  /**
   * Whether or not the user can select font variants.
   * false: the user can only select font families (Arial, Poppins, Open Sans)
   * true: the user can select a font family, a font weight and a font style (italics)
   * Default: true
   */
  variants: true,

  /**
   * Normally, a font variant is displayed as 'Arial:400', 'Open Sans:400i' or 'Poppins:700'
   * When you enable the verbose option, the selected font will be displayed as
   * 'Arial', 'Open Sans Normal Italic (400i)', 'Poppins Bold (700)' respectively.
   * Default: false
   */
  verbose: true,

  /**
   * The HTML element the picker dialog will be appended to. When you experience
   * issues focusing the input element in the FontPicker, changing this will help.
   * Required when using the FontPicker inside a Bootstrap OffCanvas or Modal.
   * By default, this is the body.
   */
  container: HTMLElement | null,

  /**
   * The initially selected font, for example: 'Poppins' or 'Poppins:800i'
   * When the Font Picker is bound to an input element, the default font will be
   * taken from the input's value.
   * You can also set a data-font attribute on the element the FontPicker is
   * attached to.
   * Default: null
   */
  font: string | null,

  /**
   * Whether or not to show a 'cancel' button in the Font Picker's footer.
   * Clicking 'cancel' closes the Font Picker without calling the pick event.
   */
  showCancelButton: boolean,

  /**
   * Whether or not to show a clear-button in the Font Picker's footer.
   * Clicking 'clear' results in calling the pick event with a null value.
   */
  showClearButton: boolean,

  /**
   * Override the default preview text (The quick brown fox...) with another one.
   * Default: null
   */
  previewText: string | null,

  /**
   * Names of default favourite font families.
   * Example: ['Open Sans', 'Poppins:700', 'Pacifico']
   * Default: []
   */
  favourites: string[]

  /**
   * Save favourites to localStorage?
   * Default: true
   */
  saveFavourites: boolean,

  /**
   * Key to use for accessing localStorage.
   * Default: 'fp__favourites'
   */
  storageKey: string,

  /**
   * Default subset filter.
   * Default: 'all'
   */
  defaultSubset: Subset

  /**
   * Default category filters.
   * Default: ['display', 'handwriting', 'monospace', 'sans-serif', 'serif'],
   */
  defaultCategories: Category[]

  /**
   * Default metric filter width.
   * Default: 'all'
   */
  defaultWidth: Metric

  /**
   * Default metric filter thickness.
   * Default: 'all'
   */
  defaultThickness: Metric

  /**
   * Default metric filter complexity.
   * Default: 'all'
   */
  defaultComplexity: Metric

  /**
   * Default metric filter curvature.
   * Default: 'all'
   */
  defaultCurvature: Metric

  /**
   * Default sorting criterion.
   */
  sortBy: Criterion

  /**
   * Reverse search order?
   * Default: false
   */
  sortReverse: boolean

  /**
   * Whitelist of Google Fonts. Use [] to disable all Google Fonts.
   * Default: null (shows all Google Fonts)
   */
  googleFonts: string[] | null

  /**
   * Whitelist of system fonts. Use [] to disable all System Fonts.
   * Default: null (shows all system fonts: Arial, Comic Sans MS, Courier New, Georgia, Helvetica, Impact, Tahoma, Times New Roman, Trebuchet MS, Verdana)
   */
  systemFonts: string[] | null

  /**
   * Extra fonts to include in the picker. Allows for picking non-Google fonts to be picked.
   * Default: null
   */
  extraFonts: FamilyProps[]
})

JS Font Picker Methods

The following methods can be called on a FontPicker instance:

/**
 * Get selected font
 * @returns {Font}
 */
const font = picker.font
console.log('Picked font', font)

/**
 * Sets the currently selected font.
 * @param {string} font. For example: 'Arial', 'Open Sans:300', 'Poppins:600i'
 */
picker.setFont(font)

/**
 * Get current configuration
 * @returns PickerConfig
 */
console.log(picker.getConfig())

/**
 * Set picker configuration
 */
picker.setConfiguration({
   font: 'Open Sans:300i',
   previewText: 'Lorem ipsum di samet',
   verbose: false
})

/**
 * Clear the font
 */
picker.clear()

/**
 * Open the FontPicker.
 */
picker.open()

/**
 * Close the FontPicker.
 */
picker.close()

/**
 * Destroy the picker, restore DOM to what it was before the FontPicker was attached.
 */
picker.destroy()

Retrieving selected font

You can retrieve the font that was selected in several ways.

• Listen to the pick event:

  /**
   * The pick event is fired when the user selects a font.
   * The font argument is either null (when the font is cleared, showClearButton == true) or a Font object, see below
   */
  picker.on('pick', (font) => console.log('pick', font))

• The font attribute returns the selected font, as a Font object:

  const font = picker.font
  console.log('Picked font', font.family.name, font.size, font.italics)

• Inspect the data-font attribute:

  const el = document.querySelector('#picker');
  const font = el.dataset.font;
  // font contains the selected font
  console.log('You picked font', font)  

• When the Font Picker is bound to an <input> element, you can simply read the input's value:

  const input = document.querySelector('input')
  console.log('You picked font', input.value)  

JS Font Picker Events

If you want to listen to certain events, like opening or picking, use the .on() method:

/**
 * The pick event is fired when the user selects a font.
 * The font argument is either null (when the font is cleared, showClearButton == true) or a Font object, see below
 */
picker.on('pick', (font) => console.log('pick', font))

/**
 * Fires when font is cleared.
 */
picker.on('clear', () => ...)

/**
 * Fires when font selection is cancelled (dialog is closed).
 */
picker.on('cancel', () => ...)

/**
 * The following events are fired when the picker is opening/closing and opened/closed (transition is complete)
 */
picker.on('open', () => console.log('open'))
picker.on('opened', () => console.log('opened'))
picker.on('close', () => console.log('close'))
picker.on('closed', () => console.log('closed'))

JS Font Picker Font object

For maximum flexibility, the pick event receives a Font object. You can query this object to retrieve info about the font the user selected.

picker.on('pick', (font) => {
  if (!font) {
    return console.log('Font cleared')
  }
  console.log(
    'Font picked',
    // When a Font object is converted to a string, you'll get 'Font:400', 'Font:700', 'Font:400i' etc.
    font.toString(),
    'Font Family', font.family.name,
    'Font weight', font.weight,
    'Font style', font.italic ? 'italic' : 'normal'
  )
})

• When a Google Font was picked, the font.family object includes category, metrics, popularity, subsets and variants data.
• When a System Font was picked, the font.family object includes category, subsets and variants data.
• When a Extra Font was picked, the font.family object includes variants, and optionally subsets data.

JS Font Picker Customization

Color scheme

You can change the color scheme (light & dark) by using one of the following dataset properties:

<html data-fp-theme="dark"></html>
<html data-bs-theme="dark"></html>
<html data-fp-theme="light"></html>
<html data-bs-theme="light"></html>

CSS variables

You can alter a variety of styles using their respective CSS variables:

/* Colors */
--fp-body-bg: #fff;
--fp-body-color: #212529;
--fp-body-bg-rgb: 255, 255, 255;
--fp-border-color: #dee2e6;
--fp-border-color-rgb: 222, 226, 230;
--fp-border-color-translucent: rgba(0, 0, 0, 0.175);
--fp-tertiary-color: rgba(33, 37, 41, 0.5);
--fp-primary: #0d6efd;
--fp-secondary: #ff8239;
--fp-hover-color: #0b5ed7;
--fp-ring-color: #86b7fe;
--fp-ring-shadow: rgba(13, 110, 253, 0.25) 0 0 0 0.25rem;
--fp-danger-rgb: 220, 53, 69;

/* Border radii */
--fp-border-radius-sm: 0.25rem;
--fp-border-radius: 0.375rem;
--fp-border-radius-lg: 0.5rem;

/* Shadows */
--fp-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--fp-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);

JS Font Picker Tips

• Here's how to include a color field in a form GET or POST.
  Bind the fontpicker to an <input> element that has a name:

  <form action="submit.php" method="post">
    <input type="text" name="font">
    <button type="submit">Submit</button>
  </form>
  
  <script>
  new FontPicker('input[name="font"]')
  </script>

Types

(interface) FamilyProps

An object representing a Font Family.

name
Font family name.
Type: string

variants
Variants supported by the font family.
Type: string[]

category (optional)
Font family category.
Type: Category

subsets (optional)
Subsets supported by the font family.
Type: Subset[]

popularity (optional)
Font family popularity index.
Type: number

metrics (optional)
Font family metrics properties.
Type: Object

width
Font family width metric value.
Type: number

thickness
Font family thickness metric value.
Type: number

complexity
Font family complexity metric value.
Type: number

curvature
Font family curvature metric value.
Type: number

url (optional)
URL to load the font family from.
Type: string

(type) Language

A translation language key.

'en' | 'nl' | 'de' | 'es' | 'fr'

(type) Subset

A subset to filter fonts by.

'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'

(type) Category

A category to filter fonts by.

'serif' | 'sans-serif' | 'display' | 'handwriting' | 'monospace'

(type) Metric

A metrics options key to filter fonts by.

'all' | '0!' | '1!' | '2!' | '3!' | '4!'

(type) Criterion

A criterion to sort fonts by.

'name' | 'popularity' | 'width' | 'thickness' | 'complexity' | 'curvature'

(type) FontWeight

A font weight.

100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

License

JSFontPicker was created by Zygomatic, is open source and licensed under the MIT license.