Font Family, Size and Color in Angular Rich text editor component

24 Jan 202515 minutes to read

Font Family

The Rich Text Editor initializes with a default font family, which inherits the font family of the parent element. You can change the font for selected text using the font family dropdown in the toolbar. When the default font family is selected, the toolbar will display “Font Name”. However, for other font families, the toolbar will show the name of the selected font.

To apply a different font style to a specific section of the content, follow these steps:

  1. Select the text you want to change.
  2. Choose the desired font style from the drop-down menu in the toolbar.

These steps will apply the selected font style to the chosen text, allowing you to customize the appearance of your content easily.

Configuring the Font Family Tool in the Toolbar

You can add the FontName tool in the Rich Text Editor toolbar using the toolbarSettings items property.

import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: 'app-root',
    template: `<ejs-richtexteditor [toolbarSettings]='tools'></ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})
export class AppComponent {
    public tools: object = {
        items: ['FontName']
    }
}

The Rich Text Editor comes with a pre-configured set of fontFamily property.

Adding Custom Font Families

The Rich Text Editor supports providing custom fonts along with the existing list. To add additional font names to the font dropdown, you can configure the items field of the fontFamily property. This allows you to extend the available font options beyond the default selection.

import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [ RichTextEditorAllModule ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='defaultRTE' [toolbarSettings]='tools' [fontFamily] ='family'>
    </ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})

export class AppComponent  {
    public tools: object = {
        items: [ 'FontName']
    };
    public family = {
        default: 'Arial',
        items: [
            { text: 'Arial', value: 'Arial, Helvetica, sans-serif' },
            { text: 'Courier New', value: '"Courier New", Courier, monospace' },
            { text: 'Georgia', value: 'Georgia, serif' },
            { text: 'Tahoma', value: 'Tahoma, Geneva, sans-serif' },
            { text: 'Verdana', value: 'Verdana, Geneva, sans-serif' }
        ]
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Supporting Google Fonts

To use web fonts in Rich Text Editor, it is not needed for the web fonts to be present in local machine. To add the web fonts to Rich Text Editor, you need to refer the web font links and add the font names in the fontFamily property.

import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'
import { Component, ViewChild } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, RichTextEditorComponent  } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [
      RichTextEditorAllModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='defaultRTE' #sample [value]="value"  [fontFamily]='fontFamily' [toolbarSettings]='toolbarSettings'></ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService ]
})

export class AppComponent  {
  @ViewChild('sample') public rteObj?: RichTextEditorComponent;
  public fontFamily: Object = {
    items: [
      {text: "Segoe UI", value: "Segoe UI", class: "e-segoe-ui",  command: "Font", subCommand: "FontName"},
      {text: "Roboto", value: "Roboto",  command: "Font", subCommand: "FontName"}, // here font is added
      {text: "Great vibes", value: "Great Vibes,cursive",  command: "Font", subCommand: "FontName"}, // here font is added
      {text: "Noto Sans", value: "Noto Sans",  command: "Font", subCommand: "FontName"},
      {text: "Impact", value: "Impact,Charcoal,sans-serif", class: "e-impact", command: "Font", subCommand: "FontName"},
      {text: "Tahoma", value: "Tahoma,Geneva,sans-serif", class: "e-tahoma", command: "Font", subCommand: "FontName"},
    ]
  };
  public toolbarSettings: Object = {
    items: ['Bold', 'Italic', 'Underline', 'StrikeThrough','|',
      'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
      'LowerCase', 'UpperCase', '|',
      'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
      'Outdent', 'Indent', '|',
      'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
      'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
    };

    public value:string = `<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul>
      <li>
          <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p>
      </li>
      <li>
          <p>Bulleted and numbered lists.</p>
      </li>
      <li>
          <p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p>
      </li>
      <li>
          <p>Contains undo/redo manager. </p>
      </li>
    </ul><div style="display: inline-block; width: 60%; vertical-align: top; cursor: auto;"><img alt="Sky with sun" src="https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png" width="309" style="min-width: 10px; min-height: 10px; width: 309px; height: 174px;" class="e-rte-image e-imginline e-rte-drag-image" height="174" /></div>  `;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The below font style links are referred in the page.

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Great+Vibes">

In the above sample, you can see that you have added two Google web fonts (Roboto and Great vibes) to Rich Text Editor.

Font Size

The Rich Text Editor initializes with a default font size, which inherits the font size of the parent element. You can change the font for selected text using the font size dropdown in the toolbar. When the default font size is selected, the toolbar will display “Font Size”. However, for other font sizes, the toolbar will show the name of the selected font.

Configuring the Font Size Tool in the Toolbar

You can add the FontSize tool in the Rich Text Editor toolbar using the toolbarSettings items property.

import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: 'app-root',
    template: `<ejs-richtexteditor [toolbarSettings]='tools'></ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})
export class AppComponent {
    public tools: object = {
        items: ['FontSize']
    }
}

The Rich Text Editor includes a default set of fontSize property.

Defining Custom Font Sizes

The Rich Text Editor supports providing custom fonts along with the existing list. To add additional font names to the font dropdown, you can configure the items field of the fontSize property. This allows you to extend the available font options beyond the default selection.

import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [ RichTextEditorAllModule ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='defaultRTE' [toolbarSettings]='tools' [fontSize]='size'>
    </ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})

export class AppComponent  {
    public tools: object = {
        items: ['FontSize']
    };
    public size = {
        default: '10',
        width: '40px',
        items: [{ text: '8', value: '8pt' },
        { text: '10', value: '10pt' },
        { text: '12', value: '12pt' },
        { text: '14', value: '14pt' },
        { text: '42', value: '42pt' }]
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Font and Background Color

Configuring the Font and Background Color Tool in the Toolbar

You can add the FontName tool in the Rich Text Editor toolbar using the toolbarSettings items property.

import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: 'app-root',
    template: `<ejs-richtexteditor [toolbarSettings]='tools'></ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})
export class AppComponent {
    public tools: object = {
        items: ['FontColor', 'BackgroundColor']
    }
}

Setting Custom Font and Background Colors

To apply font color or background color to selected content in the Rich Text Editor, use the font color and background color tools.

The Rich Text Editor offers custom font and background colors along with the existing list through the colorCode field of the fontColor and backgroundColor properties.

Both the FontColor and BackgroundColor properties offer two modes: Picker and Palette. The Palette mode provides a predefined set of colors, while the Picker mode includes a color scheme to choose custom colors. You can switch between these options using the modeSwitcher feature.

import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import { Component } from '@angular/core';
import {
  ToolbarService,
  LinkService,
  ImageService,
  HtmlEditorService,
} from '@syncfusion/ej2-angular-richtexteditor';

@Component({
  imports: [RichTextEditorAllModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-richtexteditor id='defaultRTE' [toolbarSettings]='tools' [backgroundColor]='bgColor' [fontColor] ='fontColor'>
              </ejs-richtexteditor>`,
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService],
})

export class AppComponent {
  public tools: object = {
    items: ['FontColor', 'BackgroundColor'],
  };
  
  public bgColor = {
    modeSwitcher: true,
  };
  
  public fontColor = {
    modeSwitcher: true,
  };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also