font-picker

Font Picker

A simple, customizable font selector allowing users to preview, choose, and use Google Fonts on your website.

• automatic font download and generation of the required CSS styles
• efficient font previews (previews in the list are loaded dynamically; the full font is only downloaded on selection)
• no dependencies

→ Demo

If you use React, see Font Picker for React.

Getting started

Setup

• Using script tags: Download the latest release and include the lib/index.js file in your HTML:

<script type="text/javascript" src="./path/to/dist/index.js"></script>
<script type="text/javascript">
    const fontPicker = new FontPicker(
        'YOUR_API_KEY', // Google API key
        'Open Sans', // default font
        { limit: 50 } // additional options
    );
    fontPicker.init();
</script>

• Using NPM: Install the font-picker package from NPM and require it in a JavaScript file:

npm install font-picker

const FontPicker = require('font-picker');

const fontPicker = new FontPicker(
    'YOUR_API_KEY', // Google API key
    'Open Sans', // default font
    { limit: 50 } // additional options
);
fontPicker.init();

Displaying the font picker

Create an empty <div> with the ID "font-picker" in your HTML file. This is where the font picker will be generated.

<div id="font-picker"></div>

Applying the selected font

Add the class "apply-font" to all HTML elements you want to apply the selected font to.

When the user selects a font using the font picker, it will automatically be downloaded (added as a <link> to the document's head) and applied to all HTML elements of the "apply-font" class.

See demo/index.html for an example.

Customization

Parameters

The following parameters can be passed to the constructor of the FontPicker class:

• apiKey (required): Google API key (can be generated here)
• defaultFont: Font that is selected on initialization (default: 'Open Sans')
• options: Object with additional (optional) parameters:
  • families: If only specific fonts shall appear in the list, specify their names in an array (default: all font families)
  • categories: Array of font categories – possible values: 'sans-serif', 'serif', 'display', handwriting', 'monospace' (default: all categories)
  • variants: Array of variants which the fonts must include and which will be downloaded; the first variant in the array will become the default variant (and will be used in the font picker and the .apply-font class); e.g. ['regular', 'italic', '700', '700italic'] (default: ['regular'])
  • limit: Maximum number of fonts to be displayed in the list (the least popular fonts will be omitted; default: 100)
  • sort: Sorting attribute for the font list – possible values: 'alphabetical' (default), 'popularity'
• onChange: Function which is executed whenever the user changes the active font and its stylesheet finishes downloading

Functions

The FontPicker class has the following functions:

• init(): Generates and displays the font picker inside the div with id="font-picker"
• getActiveFont(): Returns an object with information about the currently selected font

Build Process

• git clone
• npm install
• npm start to generate the library bundle using Rollup (in the lib directory)
• See the font picker in action by opening the demo/index.html file