How to use @pluginjs/font-picker - 5 common examples

const init = () => {
  return FontPicker.of(element, {
    source(resolve) {
      resolve(source)
    },
    manage(resolve) {
      resolve(source[0])
    }
  })
}
let api = init()

],
  load($item, fontFamily, text) {
    WebFont.load({
      google: {
        families: [fontFamily],
        text
      },
      fontactive() {
        $item.style.fontFamily = fontFamily
      }
    })
  }
}

const element = query('#disabled .example')
FontPicker.of(element, {
  source
})

load($item, fontFamily, text) {
      WebFont.load({
        google: {
          families: [fontFamily],
          text
        },
        fontactive() {
          $item.style.fontFamily = fontFamily
        }
      })
    }
  }
]

const element = query('#multiple-sources .example')
FontPicker.of(element, {
  source
})

'fontFamily'
      ),
      typeface: this.instance.translate('typeface')
    })
    this.$wrap = parseHTML(html)

    this.$content = query(`.${this.instance.classes.FIELDCONTENT}`, this.$wrap)
    this.element = query(`.${this.instance.classes.FONTPICKER}`, this.$content)

    const options = {}

    if (this.instance.options.fontFamily.source) {
      options.source = this.instance.options.fontFamily.source
    }

    this.FONTPICKER = FontPicker.of(this.element, {
      ...options,
      keyboard: true,
      clearable: false,
      onChange: value => {
        if (this.instance.is('disabled')) {
          return
        }
        this.instance.value.fontFamily = JSON.parse(value)
      }
    })
  }

load($item, fontFamily, text) {
    WebFont.load({
      google: {
        families: [fontFamily],
        text
      },
      fontactive() {
        $item.style.fontFamily = fontFamily
      }
    })
  }
}

const element = query('#group .example')

FontPicker.of(element, {
  source(resolve) {
    resolve(source)
  }
})