问如何使用用于TinyMCE的tinymce-vue包在VueJS中使用自定义字体？

EN

<template>
  <tinymce-editor
    :key="id"
    :initial-value="initialValue"
    :resize="false"
    :init="{
      selector: 'textarea#format-custom',
      height: height,
      plugins: 'table wordcount link lists',
      menubar : false,
      statusbar : false,
      toolbar: 'undo redo | bold italic| styleselect | alignleft aligncenter alignright alignjustify | numlist bullist | fontselect',
      content_css: [ '//www.tiny.cloud/css/codepen.min.css' ],
      content_style: 'body { font-family: Roboto Light; font-size: 16px; }' + '.left { text-align: left; }' + 'img.left { float: left; }' + 'table.left { float: left; }' + '.right { text-align: right; }' + 'img.right { float: right; }' + 'table.right { float: right; }' + '.center { text-align: center; }' + 'img.center { display: block; margin: 0 auto; }' + 'table.center { display: block; margin: 0 auto; }' + '.full { text-align: justify; }' + 'img.full { display: block; margin: 0 auto; }' + 'table.full { display: block; margin: 0 auto; }' + '.bold { font-weight: bold; }' + '.italic { font-style: italic; }' + '.underline { text-decoration: underline; }' + '.title { font-family: Raleway Bold; font-size: 26px; }' + '.subtitle { font-family: Roboto Medium; font-size: 20px; }',
      formats: {
        alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'left' },
        aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'center' },
        alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'right' },
        alignfull: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'full' },
        bold: { inline: 'span', classes: 'bold' }, italic: { inline: 'span', classes: 'italic' },
        titleformat: { inline: 'span', attributes: { title: 'Title'} , classes: 'title', },
        subtitleformat: { inline: 'span', attributes: { title: 'SubTitle'} , classes: 'subtitle' } },
      style_formats: [ { title: 'Title', format: 'titleformat' }, { title: 'SubTitle', format: 'subtitleformat' } ]
    }"
    api-key="no-api-key"
    model-events="change keydown blur focus paste"
    @input="handleInput"
    @error="handleError"
  />
</template>

<script>
import Editor from '@tinymce/tinymce-vue'

export default {
  components: {
    'tinymce-editor': Editor
  },
  props: {
    initialValue: {
      type: String,
      default: null
    },
    id: {
      type: String,
      default: null
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  methods: {
    handleInput (value) {
      this.$emit('input', value)
    },
    handleError (err) {
      console.error(err)
    }
  }
}
</script>