1. Home
  2. Forum
  3. Blazor
  4. Setting initial font size not working

Setting initial font size not working

Hi,

toolbar don't show the initial font size setting by style:

.e-richtexteditor .e-rte-content .e-content,
.e-richtexteditor .e-source-content .e-content {
    font-size: 16pt;
    font-family: Verdana;
}

when page is loaded, the rich text editor completly ignore initial settings:




when start typing, the inserted text have the right font and size, but toolbar always show 10pt:



What is the correct way to setup the editor?

Also, I need to add a new font family to the default font list. What is the standard font list? 
I think that sample code found in " Add Google fonts in Blazor RichTextEditor component" is not correct: it don't really show how to add a new font, and the result is not like as shown (less fonts than standard, Arial duplicated and Segoe UI missing).

Thanks



21 Replies 1 reply marked as answer
RK Revanth Krishnan Syncfusion Team May 17, 2021 09:52 AM UTC

Hi Lorella, 
 
 
Greetings from Syncfusion support. 
 
 
We have validated your queries, 
 
Query 1:  “Toolbar don't show the initial font size setting by styles when the page is loaded, the rich text editor completely ignores initial settings. When start typing, the inserted text has the right font and size, but the toolbar always shows 10pt. What is the correct way to set up the editor?” 
 
Query 2: “Also, I need to add a new font family to the default font list. What is the standard font list?  I think that sample code found in "Add Google fonts in Blazor Rich Text Editor component" is not correct, it doesn't really show how to add a new font, and the result is not like as shown (fewer fonts than standard, Arial duplicated and Segoe UI missing).” 
 
The property ‘Default’ in the ‘RichTextEditorFontSize’ and ‘RichTextEditorFontFamily’ should be configured to set the initial size and font to display, along with CSS styles. Also, ‘Items’ property need to be configured to add a new font family or font size. We have prepared a sample for your reference, 
 
Code Snippet: 
 
<SfRichTextEditor Placeholder="Enter Some Content"> 
    <RichTextEditorToolbarSettings Items="@Tools" /> 
    <RichTextEditorFontFamily Items="@FontFamilyItems" Default="Verdana" /> 
    <RichTextEditorFontSize Items="@FontSizeItems" Default="16pt"></RichTextEditorFontSize> 
</SfRichTextEditor> 
 
<style> 
    .e-richtexteditor .e-rte-content .e-content, 
    .e-richtexteditor .e-source-content .e-content { 
        font-size: 16pt; 
        font-family: Verdana; 
    } 
</style> 
 
@code { 
    private List<DropDownItemModel> FontSizeItems = new List<DropDownItemModel>() 
    { 
        //Newly added font size. 
        new DropDownItemModel() { Command = "Font", SubCommand = "FontSize", Text = "16 pt", Value = "16pt" }, 
        //Default Font Size in Rich Text Editor. 
        new DropDownItemModel() { Command = "Font", SubCommand = "FontSize", Text = "8 pt", Value = "8pt" }, 
        new DropDownItemModel() { Command = "Font", SubCommand = "FontSize", Text = "10 pt", Value = "10pt" }, 
        new DropDownItemModel() { Command = "Font", SubCommand = "FontSize", Text = "12 pt", Value = "12pt" }, 
        new DropDownItemModel() { Command = "Font", SubCommand = "FontSize", Text = "14 pt", Value = "14pt" }, 
        new DropDownItemModel() { Command = "Font", SubCommand = "FontSize", Text = "18 pt", Value = "18pt" }, 
        new DropDownItemModel() { Command = "Font", SubCommand = "FontSize", Text = "24 pt", Value = "24pt" }, 
        new DropDownItemModel() { Command = "Font", SubCommand = "FontSize", Text = "36 pt", Value = "36pt" } 
    }; 
 
    private List<DropDownItemModel> FontFamilyItems = new List<DropDownItemModel>() 
    { 
        //Newly added font family. 
        new DropDownItemModel() { CssClass = "e-roboto-ui", Command = "Font", SubCommand = "FontName", Text = "Roboto", Value = "Roboto" }, 
        //Default Font family in Rich Text Editor. 
        new DropDownItemModel() { CssClass = "e-segoe-ui", Command = "Font", SubCommand = "FontName", Text = "Segoe UI", Value = "Segoe UI" }, 
        new DropDownItemModel() { CssClass = "e-arial", Command = "Font", SubCommand = "FontName", Text = "Arial", Value = "Arial,Helvetica,sans-serif" }, 
        new DropDownItemModel() { CssClass = "e-georgia", Command = "Font", SubCommand = "FontName", Text = "Georgia", Value = "Georgia,serif" }, 
        new DropDownItemModel() { CssClass = "e-impact", Command = "Font", SubCommand = "FontName", Text = "Impact", Value = "Impact,Charcoal,sans-serif" }, 
        new DropDownItemModel() { CssClass = "e-tahoma", Command = "Font", SubCommand = "FontName", Text = "Tahoma", Value = "Tahoma,Geneva,sans-serif" }, 
        new DropDownItemModel() { CssClass = "e-times-new-roman", Command = "Font", SubCommand = "FontName", Text = "Times New Roman", Value = "Times New Roman,Times,serif" }, 
        new DropDownItemModel() { CssClass = "e-verdana", Command = "Font", SubCommand = "FontName", Text = "Verdana", Value = "Verdana,Geneva,sans-serif" } 
    }; 
 
    . . . 
} 
 
_Host.cshtml 
 
<head> 
    . . . 
    <link rel="stylesheet" rel='nofollow' href=http://fonts.googleapis.com/css?family=Roboto> 
</head> 
 
 
Please check the above code snippet and the sample and let us know if it satisfies your requirement. 
 
Regards, 
Revanth 
 


Marked as answer
LC Lorella Caglio May 17, 2021 04:07 PM UTC

Thanks for support.
Now it works.

RK Revanth Krishnan Syncfusion Team May 18, 2021 05:23 AM UTC

Hi Lorella, 
 
Thanks for the update. 
 
We are glad that the provided solution satisfied your requirement. Please let us know if you need any further assistance. 
 
Regards, 
Revanth 


AP Alisio Putman September 13, 2022 10:09 AM UTC

Hi,

I'm experiencing also a initial value problem.

The inital p tag doesn't contain the default font size and font family.

can be seen in my demo app.

https://github.com/alisio92/TextEditorDemo

video showcase in attachment.


thanks


Attachment: demo_61603df3.zip


CH CharlesG September 14, 2022 05:41 PM UTC

Hi, please note this doesn't quite match what is stated in the documentation:

https://blazor.syncfusion.com/documentation/rich-text-editor/how-to/default-font

The sample listed above works.  What's stated in the documentation does not.

Thanks.


VJ Vinitha Jeyakumar Syncfusion Team September 15, 2022 11:16 AM UTC

Hi Charles,


We have checked the sample provided in the mentioned documentation to change the default font family. But we didn't face any issues. we have also prepared a sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RTE_Server1169589029

Can you please share the details below,

  • Exact issue which you are facing.
  • Issue replication steps.
  • If possible please share us with the issue reproducing runnable sample and entire code snippet.

Regards,
Vinitha

GB Gregory Braekevelt replied to Vinitha Jeyakumar September 21, 2022 02:18 PM UTC

Dear Vinitha Jeyakumar


Continuing on the question from Alisio Putman, I have edited your sample to reconstruct the issue.


Following the documentation as stated on https://blazor.syncfusion.com/documentation/rich-text-editor/how-to/default-font, to set the default font, you have to configure the RTE and add a style tag to the page to set the context class

    <RichTextEditorFontFamily Default="Impact" Items="@FontFamilyItems" />

    <RichTextEditorFontSize Default="36 pt" />


<style>

    .customClass .e-rte-content .e-content {

        /* to get the desired font on intially*/

        font-family: Impact,Charcoal,sans-serif;

        font-size: 36pt;

    }

</style>


When typing new text in an empty RTE with a default font, the typed text will correctly be shown in the default font. However, when retrieving the value of the RTE, with two-way binding for example, you will get html and text without the default font styling.

Using this value on a different page, a dynamic html component, in an email, in a RTE with a different class... will result in plain text without the set default font as styling.


I assume this:

  • Setting the RTE default font settings  RichTextEditorFontFamily and RichTextEditorFontSize only selects the items in their respective dropdownlists in the toolbar
  • Setting the default font family and size in the .e-content class in a style tag on the page, only applies its styling on the RTE with this class on this page.
  • Without clicking on the font family and size button/dropdown at the start, the value of the RTE with any typed text will not have the default font.



This is an issue when you save the value to the database and reload it in a RTE with a different default font. The result will be a styling with that RTE's default font, instead of the default font you saved the text in originally, as the styling is not passed with the value of the RTE


Attachment: RTE_Server1169589029_edit_b275d99a.zip


VJ Vinitha Jeyakumar Syncfusion Team September 22, 2022 02:03 PM UTC

Hi Gregory,


Currently, we are validating your reported query. we will update you the further details on or before 26th September 2022.

Regards,
Vinitha

VJ Vinitha Jeyakumar Syncfusion Team September 26, 2022 01:02 PM UTC

Hi Gregory,

one of your assumptions was correct that setting the default font family and size in the .e-content class in a style tag on the page, only applies its styling on the RTE with this class on this page. But your requirement to get the HTML content with applied default styles can be achieved by using the below codes,

Code snippet:
<SfRichTextEditor CssClass="customClass" @bind-Value="@_myTextFromRTE">
    <RichTextEditorToolbarSettings Items="@Tools" />
    <RichTextEditorFontFamily Default="Impact" Items="@FontFamilyItems" />
    <RichTextEditorFontSize Default="36 pt" />
   
</SfRichTextEditor>

<p>
    <button type="button" @onclick="@RenderComponent">
        Render above text as actual html
    </button>
</p>

<SfRichTextEditor CssClass="classWithoutDefaults" @bind-Value="@dynamicContent" Readonly="true">
    <RichTextEditorToolbarSettings Items="@Tools" />
    <RichTextEditorFontFamily Default="Impact" Items="@FontFamilyItems" />
    <RichTextEditorFontSize Default="36 pt" />
</SfRichTextEditor>

<style>   
    .customClass .e-rte-content .e-content {
        /* to get the desired font on intially*/
        font-family: Impact,Charcoal,sans-serif;
        font-size: 36pt;
    }
    .classWithoutDefaults .e-rte-content .e-content {
            /* to get the desired font on intially*/
            font-family: initial;
            font-size: initial;
        }
   
</style>
@code{   
    public string RTEContent { get; set; }
    private string dynamicContent = "";
    private string _myTextFromRTE = "";
    private async Task RenderComponent()
    {
        RTEContent = "<div style='font-family: Impact; font-size:36pt;'>" + _myTextFromRTE + "</div>";       
        dynamicContent = RTEContent;
    }
  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RTE_Server11-1730767291



Regards,
Vinitha

JS Johannes Steurer | add-in.gmbh September 4, 2025 08:22 AM UTC

Hi,

 I have exactly the same issue with the latest version of components.
I want to have the HTML-Content to be initilized with a font without any user interaction.


The hack above does not work (any more). Whats the best approach for this in 2025?

If I use the documented approach and set

    <RichTextEditorFontFamily Items="FontFamilyItems" Width="70px" Default="Arial" />

This does only preset the dropdown, but the user must select it to be applied to the editor which is weird.



JS Johannes Steurer | add-in.gmbh September 4, 2025 08:22 AM UTC

Hi,

 I have exactly the same issue with the latest version of components.
I want to have the HTML-Content to be initilized with a font without any user interaction.


The hack above does not work (any more). Whats the best approach for this in 2025?

If I use the documented approach and set

    <RichTextEditorFontFamily Items="FontFamilyItems" Width="70px" Default="Arial" />

This does only preset the dropdown, but the user must select it to be applied to the editor which is weird.



BC Ben Croughs September 5, 2025 05:09 AM UTC

@Johannes Steurer


I was on the same project with@Gregory Braekevelt and @Alisio Putman, what we did:


we dropped syncfusion, also because they forces us into paying a much higher license fee. We went for Radzen controls, we ported the whole application to Radzen (what wasn't that obvious), and couldn't be more satisfied about this transition. Sorry Syncfusion, maybe we wanted to much customization from your components, but that is the step we did to make it work.

Regards Ben


VJ Vinitha Jeyakumar Syncfusion Team September 5, 2025 11:43 AM UTC

Hi Johannes Steurer,

The Rich Text Editor offers built-in support for customizing the default font family through the Default property within the RichTextEditorFontFamily configuration. Once set, the selected font is seamlessly applied across the editor experience:
  • Font Dropdown: The chosen font appears as the default selection in the font family dropdown.
  • Initial Content Styling: Any preloaded or default content in the editor automatically adopts the specified font.
  • Typing Behavior: As users begin typing, the configured font is applied by default, ensuring a consistent and personalized editing experience.
To assist you further, we've prepared a sample implementation along with a video illustration for your reference


Regards,
Vinitha

Attachment: SampleVideo_fdf6f930.zip

JS Johannes Steurer | add-in.gmbh September 5, 2025 12:10 PM UTC

Hi,

thanks for the project it perfectly demonstrates the issue that in fact it does not set the font:
Image_6909_1757074238957

You see in the snipping that the HTML-Tag does not have any style applied which it should have if you look at the editor. It's supposed to be a WYSIWYG editor which in this case is just not true IMO.


Thanks


PR Padmini Ramamurthy Syncfusion Team September 5, 2025 05:34 PM UTC

Hi Ben Croughs,

We cannot see that you had any unresolved technical issues while you previously evaluated our controls, but please let us know if you had any, and we will do our best to assist.  We also offer free community license to qualified customers that offers access to all of our products and free support as well. For more details, please check this at your convenience: Download Community Edition | Syncfusion


Regards,

Padmini



VJ Vinitha Jeyakumar Syncfusion Team September 8, 2025 11:57 AM UTC

Hi Johannes Steurer,

As previously mentioned, by default, the RichTextEditor will not add the font-family style to the text elements. Since the styles will be applied to the wrapper element through CSS. Later, for the styles being changed, the text content will be added in-line, hence styles are carried when adding from the formats dropdown. In order to achieve your requirement, we suggest you use the value enclosed in the element, setting the initial font-family style to get the updated HTML value. Check the below shared code blocks below for example.

Code snippet:
 @using Syncfusion.Blazor.RichTextEditor
@using Syncfusion.Blazor.Buttons

<SfRichTextEditor @ref="rteObj" @bind-Value="RteValue">
    <RichTextEditorFontFamily Default="@defFont" Items="@FontFamilyItems" />
    <RichTextEditorToolbarSettings Items="@Tools" />
</SfRichTextEditor>
<div>@dynamicContent</div>
<button class="e-btn" @onclick="@RenderComponent">Get</button>
@code {
    SfRichTextEditor rteObj;
    public string defFont { get; set; } = "Impact";
    public string dynamicContent { get; set; }
    public string RteValue { get; set; } = "Type Something..";
    private async Task RenderComponent()
    {
       
        var RTEContent = "<div style='font-family: " + defFont+ ";'>" + RteValue + "</div>";
        dynamicContent = RTEContent;
    }
    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.FontName }
    };
    private List<DropDownItemModel> FontFamilyItems = new List<DropDownItemModel>()
    {
        new DropDownItemModel() { Text = "Arial", Value = "Arial,Helvetica,sans-serif" },
        new DropDownItemModel() { Text = "Roboto", Value = "Roboto" },
        new DropDownItemModel() { Text = "Georgia", Value = "Georgia,serif" },
        new DropDownItemModel() { Text = "Impact", Value = "Impact,Charcoal,sans-serif" },
        new DropDownItemModel() { Text = "Tahoma", Value = "Tahoma,Geneva,sans-serif" }
    };

}

Regards,
Vinitha

JS Johannes Steurer | add-in.gmbh September 8, 2025 01:40 PM UTC

Hi,

thanks for the answer, but I am not convinced about this workaround. You just add a div around the whole text.

  1. this can result in nested styles which is not great e.g. 
    Image_5500_17573384159362. The workaround provided needs manual user-interaction which is a not really a helpful proposal

The whole point in using a component supplier is that all these details you mentioned above are abstracted away for the developer and I don't have to worry about them - IHMO.

What's the point in providing a way to select the default font (RichTextEditorFontFamily) if it's just not selected in the background and I need a hack to save it? From my point of view this pre-selection is even worse than no selection because it suggests to the user that the font is applied which in reality it's not.

Hope you can provide a workaround that works properly.


Thanks


JS Johannes Steurer | add-in.gmbh September 22, 2025 06:19 AM UTC

Hi,

was anybody able to review, what I was pointing out above?

Thanks


JS Johannes Steurer | add-in.gmbh replied to Vinitha Jeyakumar October 2, 2025 07:23 AM UTC

Hi,
could you please provide us an update here?

Thanks


VJ Vinitha Jeyakumar Syncfusion Team October 6, 2025 09:50 AM UTC

Hi Johannes Steurer,


The RichTextEditor applies the default font-family (and similar styles like font-size) to the wrapper contenteditable div (via CSS classes such as .e-rte-content .e-content) rather than inline styles on individual text elements (e.g., <span> tags) because the Editor is designed to inherit these properties from the parent container by default. This inheritance ensures that unformatted text adopts the wrapper's styles without needing explicit inline attributes, promoting cleaner HTML output and consistent rendering across the editor's content.

Inline styles (e.g., style="font-family: Arial;" on <span> elements) are only added when a user explicitly selects and applies a different font from the toolbar's dropdown, overriding the inherited default for that specific selection. This behavior avoids bloating the HTML with redundant inline styles for default formatting while allowing targeted overrides.

Regards,
Vinitha

JS Johannes Steurer | add-in.gmbh replied to Vinitha Jeyakumar October 7, 2025 08:09 AM UTC

Hi,

I get your point but it's still not clear how to solve the issue.
We need to be able to save the exact content the user produces (independent of the user changing the font or not). If the styles are not applied to the HTML it's not storing what the user sees and the HTML will look different in a different environment.
IMO: If i set the default-font in code it should be applied to the HTML content the same way as if the user would select this font.


What do you think?


Loader.
Up arrow icon