title: How to use custom fonts in TinyMCE using tinymce-vue package for VueJS?
body: <p>I'm trying to use custom fonts stored in my assets/fonts folder with TinyMCE, but it seems like it can't render the font, except for the format selector. The content doesn't display the font correctly, although the font selector shows the font is being applied (in the title, for example).</p>
  
  <p>Here's the code so far:</p>
  
  <pre><code>&lt;template&gt;
    &lt;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"
    /&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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)
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Here's a print:
  <a href="https://i.stack.imgur.com/AqdTt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AqdTt.png" alt="enter image description here"></a></p>