How to use Custom Fonts in React Rich Text Editor

This article explains how to use custom font packages that are not part of the Google Fonts library in a Rich Text Editor (RTE) component. It provides guidance on how to add the custom fonts strored in your web application’s filesystem and reference them using the @font-face CSS rule.

Implement Custom Fonts

1. Store the Font Files: Ensure that your custom font files are stored in your web application’s filesystem. The paths to these files will be used in the CSS.

2. Define Fonts Using @font-face: Use the @font-face rule in your CSS file to define the custom fonts. Below is an example of how to do this:

   @font-face {
     font-family: 'helvetica-light';
     font-style: normal;
     font-weight: 400;
     src: url('path/to/HelveticaLT45Light.ttf') format('truetype');
   }
   @font-face {
     font-family: 'helvetica';
     font-style: normal;
     font-weight: 400;
     src: url('path/to/HelveticaNeueBold.woff') format('woff');
   }
   @font-face {
     font-family: 'roman';
     font-weight: 400;
     src: url('path/to/HelveticaNeueRoman.otf') format('opentype');
   }
   

3. Configure the Rich Text Editor: In your JavaScript file, configure the Rich Text Editor to include the custom fonts in the font family options. Below is an example configuration:

   const toolbarSettings = {
       items: ['Bold', 'Italic', 'Underline', 'StrikeThrough', 'FontName', 'FontSize']
   };
   const fontFamily = {
     default: 'Segoe UI',
     items: [
       {
         text: 'Helvetica 45 Light',
         value: 'helvetica-light',
         command: 'Font',
         subCommand: 'FontName',
       },
       {
         text: 'helvetica',
         value: 'helvetica',
         command: 'Font',
         subCommand: 'FontName',
       },
       {
         text: 'Helvetica 55 Roman',
         value: 'roman',
         command: 'Font',
         subCommand: 'FontName',
       },
       {
         text: 'Segoe UI',
         value: 'Segoe UI',
         class: 'e-segoe-ui',
         command: 'Font',
         subCommand: 'FontName',
       },
     ],
   };
   
   return (
     <RichTextEditorComponent toolbarSettings={toolbarSettings} fontFamily={fontFamily}>
       <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
     </RichTextEditorComponent>
   );
   

Important Note

The Rich Text Editor component does not accept fonts directly from the local machine. You must define the font sources using the @font-face rule in your CSS. Only then you can reference these fonts in the Rich Text Editor component.

Conclusion

I hope you enjoyed learning How to use custom fonts in React Rich Text Editor.

You can refer to our React Rich Text Editor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Rich Text Editor example to understand how to create and manipulate data.