How to Customize Font Family in Angular DOCX Editor

14 Aug 20261 minute to read

Angular DOCX Editor (Document Editor) provides options to customize the font family drop-down list values using fontFamilies in Document editor settings. Fonts 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 documentEditorSettings property for DocumentEditor also.

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

import { Component, OnInit } from '@angular/core';
import { ToolbarService } from '@syncfusion/ej2-angular-documenteditor';
@Component({
      selector: 'app-root',
      // specifies the template string for the DocumentEditorContainer component
      template: `<ejs-documenteditorcontainer serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" height="600px" style="display:block" [documentEditorSettings]= "fontFamilies" [enableToolbar]=true> </ejs-documenteditorcontainer>`,
      providers: [ToolbarService]
})
export class AppComponent implements OnInit {
    // Add the required font families to list them in the font drop-down
    public fontFamilies={fontFamilies :['Algerian', 'Arial', 'Calibri', 'Cambria']};
    ngOnInit(): void {
    }
}

NOTE

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ utilized in the Document 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