Build a jQuery Google Fonts API Fonts Picker Popup Modal to Preview Google Fonts in Browser Using HTML5 & Javascript Full Project For Beginners

 

 

 

index.html

 

 

 

 

Fontpicker jQuery Plugin

A component to quickly choose fonts from Google Web Fonts, custom fonts you (the web developer) provide, as well as system fonts. Lets users easily select and preview a font from Google’s large range of free fonts, and optionally select a font weight and font style (normal or italics). This plugin is the successor of the Fontselect jQuery plugin.

Live Demo

Table of contents

Features

  • Quickly preview and select any Google font family.
  • Lazy loading of fonts as they come into view (uses IntersectionObserver)
  • Optionally present system and local fonts (.woff) as well.
  • Optionally choose font weight and font style.
  • Find fonts by name, language and category (serif, sans-serif, display, handwriting, monospace).
  • Users can favor fonts (stored in a cookie). Favored fonts are listed in the Favorite fonts section upon re-opening the picker.
  • Remembers users last picked fonts, listing them on top in the Favorite fonts section upon re-opening the picker.
  • 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 input element is focused).
    • Up/Down cursor keys navigate through options.
    • Enter selects on option, double-clicking does too.
    • Esc closes the picker.
    • 1-9 selects a font weight in an active item. 1 = font-weight 100 … 4 = font-weight 400 … 9 = font-weight 900.
    • i toggles italics in an active item.
  • Drop-in replacement for a regular input element.

Demo

Live demo.

Getting started

Installation

This is a jQuery plugin, so… make sure you load jQuery before you include this plugin.

With a copy on your server:

You can also load it from jsDelivr:

Usage

To create a font picker, simply run the plugin on a standard html input element.

Syntax

  • options (optional)
    • Type: Object
    • The options for the font picker. See available options.

Example

When a user picks a font, the original input element will be filled with the chosen font family name: AlegreyaArialFaster One etc. If the variants option has been enabled (it is by default), the font family will be followed by a font-weight and an italics indicator. Some examples:

  • Alegreya:400: Font family Alegreya, font weight 400
  • Alegreya:700: Font family Alegreya, font weight 700
  • Alegreya:700i: Font family Alegreya, font weight 700, italics
  • Faster One:400: Font family Faster One, font weight 400
  • Arial:600i: Font family Arial, font weight 600, italics

⬆ back to top

Options

Fontpicker has one argument, an options object that you can customise.

lang

  • Type: String
  • Default: en
  • Options:
    • en: English
    • de: German
    • es: Spanish
    • nl: Dutch

The interface language. If you need a translation in another language: take a look at the dictionaries variable in jquery.fontpicker.js, and send me the translations for your language.

variants

  • Type: Boolean
  • Default: true

With variants: true, users can not only select a font family, but the variant (font weight and font style) of it as well, if applicable. Many fonts in the Google Repository have multiple variants (multiple font weights, normal and italic styles). In this case, the input element will have a value that consists of the chosen font, followed by the font-weight and an italics indicator (see Example).

nrRecents

  • Type: Number
  • Default: 3

The fontpicker component lists the last X fonts the user picked earlier first, in the Favorite fonts section. The nrRecents option defines how many last-picked fonts to remember. Use 0 to not remember any at all.

lazyLoad

  • Type: Boolean
  • Default: true

When the user scrolls the font list, each font is rendered in its own font family. This is accomplished by loading the external font on demand, as soon as the font becomes visible in the list (using an Intersection Observer). The lazyLoad option enables or disables this functionality. If disabled, fonts in the list will no longer be rendered in their own font family.

googleFonts

  • Type: Array
  • Default: All available Google Fonts

An array of Google fonts to present in the font list. Shows all available Google fonts by default. Use false to not show Google Fonts at all.

localFonts

The Google Fonts Repository doesn’t always offer enough options. The fontpicker plugin allows you to present custom fonts as well. The local font files have to be in .woff (not .ttf) format (for best compatibility with as many browsers as possible), and they should all be put in a single folder, under the document root folder of your site. Something like /fonts/ makes sense. Provide the path to this folder as the localFontsUrl configuration parameter. You can convert .otf/.ttf fonts to .woff on transfonter.org, it’s a free service.

  • Type: Object
  • Default:

The key of an item is the font family. As mentioned above, make sure that custom (non-system) fonts are available on your webserver, as .woff files. Make sure the name of the font files matches the font family name used here: "Action Man" -> /fonts/Action Man.woff "Bubble" -> /fonts/Bubble.woff

The value of an item is an object, containing up to 3 properties:

  • category: A String, containing one of serif, sans-serif, display, handwriting, monospace. This allows users to filter fonts by category. If omitted, the font is listed under the other category.
  • variants: A String, containing a comma-separated list of variants available for the font. See example below. If omitted, users cannot pick a variant for this font (the font weight will be 400, the font style will be normal (non italics)).
  • subsets: A String, containing a comma-separated list of language-subsets the font entails. This allows users to filter fonts by language. If omitted, the font can (only) be found under All languages.

Example:

localFontsUrl

  • Type: String
  • Default: /fonts/

Path to folder where local fonts are stored (in .woff format). Default: /fonts/Make sure to end with a slash!

parentElement

  • Type: String or jQuery object
  • Default: 'body'

Parent element (jQuery selector/element) to attach the font picker to. The default body should suffice in pretty much all cases. Only tinker with this if you know what you’re doing.

If you want to use the Fontpicker inside a Bootstrap modal, you need to attach it to the modal instead of the body, to prevent keyboard/mouse focus issues. For example:

showClear

  • Type: Boolean
  • Default: false

When enabled, users can clear/deselect a selected font. A clear icon will be rendered in the font dropdown.

onSelect

  • Type: function
  • Default: undefined

By default, the Fontpicker Plugin calls change on the original input element. This is sufficient in many cases, but sometimes you also need to know whether a local or Google font was selected. That’s where the onSelect callback comes in. This callback function is called when the user picks a font. The function is called with a single argument: an object, containing the following members:

  • fontType: Either local or google
  • fontFamily: The font family name (string)
  • fontStyle: Either normal or italic
  • fontWeight: The font weight the user selected (integer).
  • fontSpec: The complete font spec. For example: Arial:400 or Roboto:700i.

debug

  • Type: Boolean
  • Default: false

When enabled, the plugin shows info about fonts being loaded in the console.

⬆ back to top

Methods

set font

Programmatically select a font by calling val() on the original input element, then triggering the change event:

or

or

You can programmatically clear a selected font like this:

show

Show the font picker manually

hide

Hide the font picker manually

destroy

Destroy the font picker, revert element back to original.

⬆ back to top

Browser support

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Opera (latest)
  • Edge (latest)
  • Internet Explorer 11

Please note: For Internet Explorer, you must include the intersection-observer polyfill:

You can include this anywhere in your page, either before or after including jquery.fontpicker.js.

 

 

DOWNLOAD FULL SOURCE CODE

 

 

Leave a Reply