DOCUMENTATION.md

Documentation

• Documentation
  • (class) FontPicker
    • Constructor
    • Methods
      • getConfig
      • configure
      • setFont
      • open
      • close
      • destroy
    • Properties
      • font
    • Events
      • open
      • close
      • pick
      • cancel
  • (class) Font
    • Methods
      • toId
      • toString
    • Properties
      • family
      • weight
      • italic
      • style
      • variant
  • (class) FontFamily
    • Methods
      • toString
      • getDefaultVariant
• Types
  • (interface) PickerConfig
  • (interface) FamilyProps
  • (type) Language
  • (type) Subset
  • (type) Category
  • (type) Metric
  • (type) Criterion
  • (type) FontWeight

(class) FontPicker

Constructor

Creates a new FontPicker instance.

new FontPicker(element, config)

Arguments

element
The (query for a) button or input element to bind to. Type: HTMLButtonElement | HTMLInputElement | string

config (partial, optional)
Picker configuration options.
Type: PickerConfig

Methods

getConfig

Gets the current picker configuration.

.getConfig()

Returns

The current configuration object.
Type: PickerConfig

configure

Sets the picker configuration.

.configure(config)

Arguments

config (partial)
Picker configuration options.
Type: PickerConfig

setFont

Sets the currently selected font.

.setFont(font)

Arguments

font
Font family name, optionally with variant.
Type: string

open

Opens the font picker dialog.

.open()

Returns

Promise with the picked font.
Type: Promise<Font>

close

Closes the font picker dialog.

.close()

destroy

Destroys the font picker dialog.

.destroy()

Properties

font

The currently selected font.
Type: Font

Events

open

Fires when the font picker dialog is opened.

.on('open', () => ...)

close

Fires when the font picker dialog is closed.

.on('close', () => ...)

pick

Fires when a font is succesfully picked.

.on('pick', (font) => ...)

Arguments

font
The picked font.
Type: Font

cancel

Fires when font selection is cancelled.

.on('cancel', () => ...)

(class) Font

Methods

toId

Get the font's ID string.

.toId()

Returns

The font's ID string.
Type: string

toString

Get the font's verbose name string.

.toString()

Returns

The font's verbose name string.
Type: string

Properties

family

The font family.
Type: FontFamily

weight

The font weight.
Type: FontWeight

italic

Whether the font is italic.
Type: boolean

style

(readonly)
The font style.
Type: 'normal' | 'italic'

variant

(readonly)
The font variant.
Type: string

(class) FontFamily

Methods

toString

Get the font family's name.

.toString()

Returns

The font family's name.
Type: string

getDefaultVariant

Gets the default variant for the font family.

.getDefaultVariant()

Returns

The font family's default variant.
Type: string

Types

(interface) PickerConfig

A FontPicker configuration object.

language
Language to use for the interface.
Type: Language

container
Container to place the modal in.
Type: HTMLElement

previewText
Override for the font preview translation.
Type: string | null

font
Default font family and variant.
Type: string

verbose
Show the full variant name on the picker button?
Type: boolean

variants
Allow the user to choose font variants?
Type: boolean

favourites
Names of default favourite font families.
Type: string[]

saveFavourites
Save favourites to localStorage?
Type: boolean

storageKey
Key to use for accessing localStorage.
Type: string

defaultSubset
Default subset filter.
Type: Subset

defaultCategories
Default category filters.
Type: Category[]

defaultWidth
Default metric filter width.
Type: Metric

defaultThickness
Default metric filter thickness.
Type: Metric

defaultComplexity
Default metric filter complexity.
Type: Metric

defaultCurvature
Default metric filter curvature.
Type: Metric

sortBy
Default sorting criterion.
Type: Criterion

sortReverse
Reverse search order?
Type: boolean

googleFonts
Whitelist for Google Fonts.
Type: string[] | null

googleFonts
Whitelist for System Fonts.
Type: string[] | null

extraFonts
Extra fonts to also include in the picker.
Type: FamilyProps[]

(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