How to apply custom fonts in .NET MAUI Rich Text Editor?

This article explains how to add and use custom fonts in the Syncfusion .NET MAUI RichTextEditor. By binding the Rich Text Editor’s FontFamilies property to the list of RichTextEditorFontStyle, you can expose your custom fonts in the editor’s font dropdown and apply them to the content.

Step 1: Add your custom font .ttf files to Resources/Fonts folder (e.g., StackSans.ttf, DancingScript.ttf, PlaywriteCZ.ttf). Register them as EmbeddedResource in your project Build Action.

Project file (csproj):

<ItemGroup>
     <EmbeddedResource Include="Resources\Fonts\DancingScript.ttf" />
     <EmbeddedResource Include="Resources\Fonts\PlaywriteCZ.ttf" />
     <EmbeddedResource Include="Resources\Fonts\StackSans.ttf" />
</ItemGroup> 

Note: We don’t need to register these custom fonts in the MauiProgram.cs file.

Step 2: Define a ViewModel with a property of type List and add your custom fonts to it. Make sure the display name and the exact font file name (including the .ttf extension) are provided as parameters. The font file names must exactly match the files placed under Resources/Fonts

public ViewModel()
{
   HtmlText = "<p>Hello there, Welcome to RichTextEditor</p><p>Hello there, Welcome to RichTextEditor</p><p>Hello there, Welcome to RichTextEditor</p>";

   CustomFonts = new List<RichTextEditorFontStyle>
   {
       new RichTextEditorFontStyle ("Arial", "Arial.ttf"),
       new RichTextEditorFontStyle ("Courier New", "Courier New.ttf"),
       new RichTextEditorFontStyle ("Georgia", "Georgia.ttf"),
       new RichTextEditorFontStyle ("Times New Roman", "Times New Roman.ttf"),
       new RichTextEditorFontStyle ("Verdana", "Verdana.ttf"),
       new RichTextEditorFontStyle ("Stack Sans", "StackSans.ttf"),
       new RichTextEditorFontStyle ("Dancing Script", "DancingScript.ttf"),
       new RichTextEditorFontStyle ("Playwrite CZ", "PlaywriteCZ.ttf"),
   };
} 

Step 3: Initialize the RichTextEditor control. Refer to the UG documentation for setup details. Set the page’s BindingContext to your ViewModel, then bind the HtmlText and FontFamilies properties to expose your custom fonts in the editor toolbar.

<ContentPage.BindingContext>
   <vm:ViewModel/>
</ContentPage.BindingContext>

<RTE:SfRichTextEditor HtmlText="{Binding HtmlText}"
    FontFamilies="{Binding CustomFonts}"/> 

Output:

Download the complete sample from GitHub.

Conclusion:

I hope you enjoyed learning about how to apply custom fonts in .NET MAUI RichTextEditor.

You can refer to our MAUI RichTextEditor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

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!