Changing the font family for all syncfusion components

[Stephanie Koronidou]

Hello,

Is it possible to customize all the Blazor syncfusion controls font?

I have tried.e-controlclass but it does not work for example for tap and card components.

[Jesus Arockia Sankaran S]

Hi Stephanie, 

Thanks for contacting Syncfusion support. 

We have checked your query and we suspect that due the some inherited style property font-family value in “e-control” class is not applied for TabItem. Hence, Card is a CSS component which doesn’t have “e-control” class but we have created a simple sample for your reference that you can download from the below link. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp153742-2121933 

Code Snippet: 

@*Pages/Index.razor*@ 

<style> 

    .e-control { 

        font-family: cursive; 

    } 

    .e-tab .e-toolbar-items .e-toolbar-item .e-tab-text { 

        font-family: cursive; 

    } 

    .e-card { 

        font-family: cursive; 

    } 

</style> 

Reference Image: 

 

Please get back to us if you need any further assistance on this. 

Regards, 

Jesus Arockia Sankaran S 

[Sarah]

Hello

I use sfgrid, sftreeview, combobox, multisect and I could not change the font of all parts. On my system, most of the sections are displayed correctly (not all), but after publishing the website, it is displayed with a different appearance in some clients.

(my project: blazor web app .net 8)

[Subathra Kaliamoorthy]

Hi Stephanie,

 

Upon validating your query, we came to know that you would like to override the font-family of the all the Syncfusion Blazor Components you are using in your application. For doing so, you need to override the default CSS of each component. However, to get the information on the CSS class of each element, you can find it under the "Styles and Appearances" topic under each component documentation like mentioned below.

 

DataGrid: Styling and Appearance in Blazor DataGrid Component

TreeView: Styles and Appearance in Blazor TreeView Component

ComboBox: Style and appearance in Blazor ComboBox Component

Multiselect Dropdown: Style and appearance in Blazor MultiSelect Dropdown Component

 

Please check the attached sample, where we have customized the font-family for the mentioned components like shown below. Please check it and get back to us if you have any other queries.

 

Regards,

Subathra K

Attachment: BlazorAppCustomFont_3b312b1d.zip

[Sarah]

Hi Subathra Kaliamoorthy,

I changed the background of SfComboBox. There is a bug that does not change the background of the item that the cursor is placed on when the cusros moves.

.e-dropdownbase .e-list-item, .e-dropdownbase .e-list-item.e-item-focus {

    font-family: 'Times New Roman' !important;

    background-color:blueviolet !important;

}

[Subathra Kaliamoorthy]

Hi Sarah,

If you want to override the background color of the SfComboBox with a visible hover color, you can define a background-color for the hover class of  ".e-list-item" like mentioned below.

Additionally, we have also attached a sample for your reference, please check it and get back to us if you have any other queries.

Regards,

Subathra K

Attachment: BlazorAppCustomFont_68ac274c.zip