Bootstrap 5 Font Picker For Google And System Fonts

Category: Javascript | October 25, 2024
0 Comment
Authorwipeautcrafter
Last UpdateOctober 25, 2024
LicenseMIT
Tags
, ,
Views63 views
OfficialGo to website
Live DemoDownload
Bootstrap 5 Font Picker For Google And System Fonts

This is a feature-rich, user-friendly font picker component built with Vanilla JavaScript and Bootstrap 5 framework. It supports both Google and system fonts and uses Bootstrap 5’s modal component for an intuitive font picker dialog.

The Bootstrap font picker features font favorites, keyboard navigation, dynamic font loading, fuzzy search for quick font discovery, and advanced filtering through metrics like width, thickness, and curvature. It also supports multiple languages including English, Dutch, German, Spanish, and French.

How to use it:

1. Optimize Google font loading by including preconnect links to Google Fonts in your document’s <head> section. OPTIONAL but Recommended.

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

2. Download the Bootstrap Font Picker package and include the necessary JavaScript and CSS files:

<link rel="stylesheet" href="/dist/fontpicker.css" />
<script src="/dist/fontpicker.iife.js"></script>
For ES module usage:
import { FontPicker, FontLoader } from 'fontpicker.js';

3. Create a button element in your document to trigger the font picker:

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

4. Initialize the font picker and done.

const button = document.querySelector('#picker')
const picker = new FontPicker(button, {
      // options here
})

5. Available configuration options:

const picker = new FontPicker(button, {
  // UI language ('en', 'nl', 'de', 'es', 'fr')
  language: 'en',
          
  // Dialog container element
  container: document.body,
 
  // Override preview text
  previewText: null,
       
  // Initial font
  font: 'Arial',
           
  // Show full variant name
  verbose: false,
          
  // Enable variant selection
  variants: true,
          
  // Default favorite fonts
  favourites: [],
          
  // Save favorites to localStorage
  saveFavourites: true,
    
  // localStorage key
  storageKey: 'fp__favourites',
 
  // Default character subset
  defaultSubset: 'all', 
   
  // Default categories
  defaultCategories: ['display', 'handwriting', 'monospace', 'sans-serif', 'serif'],
 
  // Default width filter (0-4, 'all')
  defaultWidth: 'all',
      
  // Default thickness filter (0-4, 'all')
  defaultThickness: 'all',
  
  // Default complexity filter (0-4, 'all')
  defaultComplexity: 'all',
 
  // Default curvature filter (0-4, 'all')
  defaultCurvature: 'all',
  
  // Sort criteria ('name', 'popularity', 'width', 'thickness', 'complexity', 'curvature')
  sortBy: 'popularity',
    
  // Reverse sort order
  sortReverse: false,
       
  // Whitelist Google Fonts (null for all)
  googleFonts: null,
       
  // Whitelist system fonts (null for common)
  systemFonts: null,
       
  // Custom fonts [{ name: 'Font Name', url: 'font.woff2' }]
  extraFonts: [],   
       
});

6. API methods.

  • picker.setFont(fontName): Sets the currently selected font. The fontName argument can be either a font family name (e.g., “Roboto”) or a full font string including variants (e.g., “Roboto:700italic”). This method updates the picker’s internal state and the displayed font.
  • picker.configure(options): Modifies the picker’s configuration. The options argument is an object containing the options you want to change. You can update any of the options available in the initial configuration.
  • picker.getConfig(): Retrieves the current configuration options as an object. This is useful for inspecting the picker’s current state or saving the configuration for later use.
  • picker.open(): Programmatically opens the font picker dialog.
  • picker.close(): Programmatically closes the font picker dialog.

7. Event handlers.

// Triggered when the font picker dialog opens.
picker.on('open', () => {
    console.log('Font picker opened');
});
// Triggered when the font picker dialog closes.
picker.on('close', () => {
    console.log('Font picker closed');
});
// Triggered when the user selects a font. 
// The callback function receives the selected font as an argument, 
// which is a string representing the font family and its variants (e.g., "Roboto:700italic").
picker.on('pick', (font) => {
  console.log('Selected font:', font);
});
// Triggered when the user cancels the font selection
picker.on('cancel', () => {
  console.log('Font selection cancelled');
});

See Also:

You Might Be Interested In:

Leave a Reply