Font Family, Size and Color in ASP.NET MVC Rich text editor Control

4 Mar 202517 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:

Select the text you want to change.
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.

You can add the FontName tool in the Rich Text Editor toolbar using the ToolbarSettings Iems property.

CSHTML
Controller.cs
@Html.EJS().RichTextEditor("font").ToolbarSettings(e => e.Items((object)ViewBag.items)).Value(ViewBag.value).Render()
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.items = new[] { "FontName"};
        ViewBag.value = @"<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>";
        return View();
    }
}

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.

CSHTML
Controller.cs
@Html.EJS().RichTextEditor("custom-font").ToolbarSettings(e => e.Items((object)ViewBag.items)).FontFamily(t => t.Width("80px").Default("Arial").Items(ViewBag.fontFamilyItems)).Value(@ViewBag.value).Render()
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.value = @"<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>";
        ViewBag.items = new[] { "FontName"};
        
        object item1 = new
        {
            text = "Segoe UI",
            value = "Segoe UI"
        };
        object item2 = new
        {
            text = "Arial",
            value = "Arial,Helvetica,sans-serif"
        };
        object item3 = new
        {
            text = "Courier New",
            value = "Courier New,Courier,monospace"
        };
        object item4 = new
        {
            text = "Georgia",
            value = "Georgia,serif"
        };
        object item5 = new
        {
            text = "Impact",
            value = "Impact,Charcoal,sans-serif"
        };
        object item6 = new
        {
            text = "Calibri Light",
            value = "CalibriLight"
        };

        ViewBag.fontFamilyItems = new[] { item1, item2, item3, item4, item5, item6 };
        return View();
    }

}

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.

CSHTML
Controller.cs
@Html.EJS().RichTextEditor("google-font").FontFamily(e => e.Items((object)ViewBag.fontItems)).ToolbarSettings(e => e.Items((object)ViewBag.tools)).Value(ViewBag.value).Render()
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Great+Vibes">
public class HomeController : Controller
{

    public ActionResult Index()
    {
        object item1 = new
        {
            text = "Segoe UI",
            value = "Segoe UI"
        };
        object item2 = new
        {
            text = "Roboto",
            value = "Roboto"
        };
        object item3 = new
        {
            text = "Great vibes",
            value = "Great Vibes,cursive"
        };
        object item4 = new
        {
            text = "Noto Sans",
            value = "Noto Sans"
        };
        object item5 = new
        {
            text = "Impact",
            value = "Impact,Charcoal,sans-serif"
        };
        object item6 = new
        {
            text = "Tahoma",
            value = "Tahoma,Geneva,sans-serif"
        };
        ViewBag.fontItems = new[] { item1, item2, item3, item4, item5, item6 };
        ViewBag.value = @"<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>";
        ViewBag.tools = new[] {
            "Bold", "Italic", "Underline", "StrikeThrough",
            "FontName", "FontSize", "FontColor", "BackgroundColor",
            "LowerCase", "UpperCase", "|",
            "Formats", "Alignments", "OrderedList", "UnorderedList",
            "Outdent", "Indent", "|",
            "CreateLink", "Image", "CreateTable", "|", "ClearFormat", "Print",
            "SourceCode", "FullScreen", "|", "Undo", "Redo"
        };
        return View();
    }
}

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

NOTE

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

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.

You can add the FontSize tool in the Rich Text Editor toolbar using the ToolbarSettings Items property.

CSHTML
Controller.cs
@Html.EJS().RichTextEditor("font-size").ToolbarSettings(e => e.Items((object)ViewBag.items)).Value(ViewBag.value).Render()
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.value = @"<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>";
        ViewBag.items = new[] {"FontSize" };
        return View();
    }
}

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.

CSHTML
Controller.cs
@Html.EJS().RichTextEditor("custom-font").ToolbarSettings(e => e.Items((object)ViewBag.items)).FontSize(t => t.Width("60px").Default("10px").Items(ViewBag.fontSizeItems)).Value(ViewBag.value).Render()
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.value = @"<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>";
        object size1 = new
        {
            text = "8 px",
            value = "8px"
        };
        object size2 = new
        {
            text = "10 px",
            value = "10px"
        };
        object size3 = new
        {
            text = "12 px",
            value = "12px"
        };
        object size4 = new
        {
            text = "14 px",
            value = "14px"
        };
        object size5 = new
        {
            text = "42 px",
            value = "42px"
        };

        ViewBag.items = new[] { "FontSize" };
        ViewBag.fontSizeItems = new[] { size1, size2, size3, size4, size5 };
        return View();
    }

}

Font and Background Color

You can add the FontName tool in the Rich Text Editor toolbar using the ToolbarSettings Items property.

CSHTML
Controller.cs
@Html.EJS().RichTextEditor("font").ToolbarSettings(e => e.Items((object)ViewBag.items)).Value(ViewBag.value).Render()
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.items = new[] { "FontColor", "BackgroundColor"};
        ViewBag.value = @"<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>";
        return View();
    }
}

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.

CSHTML
Controller.cs
@Html.EJS().RichTextEditor("edit-color").ToolbarSettings(e => e.Items((object)ViewBag.items)).FontColor(f => f.ModeSwitcher(true)).BackgroundColor(b => b.ModeSwitcher(true)).Value(@ViewBag.value).Render()
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.value = @"<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>";
        ViewBag.items = new[] { "FontColor", "BackgroundColor" };
        return View();
    }
}

Font Family, Size and Color in ASP.NET MVC Rich text editor Control

Font Family

Configuring the Font Family Tool in the Toolbar

Adding Custom Font Families

Supporting Google Fonts

Font Size

Configuring the Font Size Tool in the Toolbar

Defining Custom Font Sizes

Font and Background Color

Configuring the Font and Background Color Tool in the Toolbar

Setting Custom Font and Background Colors

See Also