How can I customize vue2-editor toolbar?

Question

I wrapped VueEditor component and followed what was written here to add font family selection to my toolbar.

<template>
  <VueEditor
    v-bind="$attrs"
    v-on="$listeners"
    :editor-toolbar="customToolbar"
  />
</template>

<script>
import { VueEditor, Quill } from 'vue2-editor'

const fonts = Quill.import('formats/font')

export default {

  components: {
    VueEditor
  },

  data () {
    return {

      customToolbar: [
        [
          { header: [false, 1, 2, 3, 4, 5, 6] }
        ],
        ['bold', 'italic', 'underline', 'strike'],
        [
          { align: '' },
          { align: 'center' },
          { align: 'right' },
          { align: 'justify' }
        ],
        ['blockquote', 'code-block'],
        [
          { list: 'ordered' },
          { list: 'bullet' },
          { list: 'check' }
        ],
        [
          { indent: '-1' },
          { indent: '+1' }
        ],
        [
          { color: [] },
          { background: [] }
        ],
        ['link', 'image', 'video'],
        ['clean'],
        [
          { font: fonts.whitelist }
        ]
      ]
    }
  }
}
</script>

I have several questions:

• How can I change font family selection position? I want to have it right after heading selection.
• Why do I only have two font families available? (Serif and Monospace)
• How can I add font size selection to my toolbar?