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 React 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

Conclusion
I hope you enjoyed learning how to use custom fonts in React Rich Text Editor.
You can refer to React RichTextEditor 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 RichTextEditor example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!