How to Customize Font Family in Vue DOCX Editor

28 Aug 20262 minutes to read

Vue DOCX Editor (Document Editor) provides an option to customize the font family drop-down list values using fontFamilies in the Document Editor settings. The fonts that are added in the fontFamilies of documentEditorSettings will be displayed in the font drop-down list of the text properties pane and the font dialog.

Similarly, you can use the documentEditorSettings property for the DocumentEditor also.

The following example code illustrates how to change the font families in the Document Editor container.

<template>
  <div id="app">
    <ejs-documenteditorcontainer ref='documenteditor' :serviceUrl='serviceUrl' :documentEditorSettings='settings'
      height="590px" id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
  </div>
</template>
<script setup>
import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
import { provide } from 'vue';

const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
// Add the required font families to list them in the font drop-down
const settings = { fontFamilies: ['Algerian', 'Arial', 'Calibri', 'Cambria'] }

//Inject required modules.
provide('DocumentEditorContainer', [Toolbar])

</script>
<template>
  <div id="app">
    <ejs-documenteditorcontainer ref='documenteditor' :serviceUrl='serviceUrl' :documentEditorSettings='settings'
      height="590px" id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
  </div>
</template>
<script>
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';

export default {
  components: {
    'ejs-documenteditorcontainer': DocumentEditorContainerComponent
  },
  data() {
    return {
      serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/',
      // Add the required font families to list them in the font drop-down
      settings: { fontFamilies: ['Algerian', 'Arial', 'Calibri', 'Cambria'] }
    };
  },
  provide: {
    //Inject required modules.
    DocumentEditorContainer: [Toolbar]
  }
}
</script>

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ utilized in the DOCX Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.

The output will be as shown below:

Font