Skip to main content
Version: v11.6.2

Adding Custom Fonts to Richtext Editor

In this document, learn how to add custom fonts to the Richtext Editor.

Adding Custom Fonts​

To add custom fonts to the Richtext Editor, modify the defaultOptions property of the widget and add desired font names to the list. For that, you must add the function inside the onBeforeRender() event before the widgets are loaded.

Steps​

Follow the steps below to achieve this.

  1. Add the below snippet inside the onBeforeRender() event of the Richtext Editor widget.

    • The snippet adds Inter font to the fontNames array.
Page.<richTextEditor>Beforerender = function($event, widget) {
    var defaultOptions = widget.getDefaultOptions();
    defaultOptions.fontNames.push("Inter");
    defaultOptions.fontNamesIgnoreCheck = ["Inter"]; // ignore checks for the font
};
note

We have included the fontNamesIgnoreCheck array to ignore checks for the font, as it may take longer to load.

  1. Import the font CSS in the project. Here, we are importing the stylesheet in index.html.
<link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>

/learn/assets/RichtextEditor/RTE-custom-font.png