How can I customize vue2-editor toolbar? - vuejs2

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?