global font-family

[Marek]

Hello 

Is it possible to change font-family globally for all components? Or do I have to do it separately in each component?

Greetings!

[Theveshwar Jayakumar]

Hi Marek,

Greetings from Syncfusion support,

Yes, we can change the font family globally for all Syncfusion components by overriding the font family using the e-control class. This class is present in all Syncfusion components, and it enables us to change the font family of all Syncfusion EJ2 React UI components in an application. For your convenience, we have created a simple React sample based on your requirements.

To change the font family of all Syncfusion components, you can include the following CSS code block in the style sheet of your application:

.e-control {

    font-family: Arial !important;

}

Please refer the below sample.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/React-font-853759537.zip

For more information on how to set the font family globally for Syncfusion components, please see the following documentation:

Link: https://ej2.syncfusion.com/react/documentation/appearance/size-modes/#change-the-font-family-of-syncfusion-ej2-react-ui-components

Please get back to us if you need any further assistance

Regards, 

Theveshwar

[Marek]

Thank you for your reply greetings

[Theveshwar Jayakumar]

Hi Marek,

 

Thanks for the update, please get back to us if you need any further assistance.

 

Regards, 

Theveshwar

[George]

Is there something I am missing? This isn't working for badges and accumulation chart legends and data labels.

[SureshRajan Alagarsamy]

Hi George,

We have reviewed your query and understand that the specified font-family in the "e-control" class is not being applied to the Badge component. We would like to inform you that the Badge component is a CSS component and does not include the "e-control" class. Instead, we suggest setting the font-family to the "e-badge" class.

Refer to the below code snippet for further reference.

[index.css]

 

.e-control, .e-badge {

        font-family: Arial;

 }

 

We have also attached a sample for your reference.

Sample : https://stackblitz.com/edit/react-1fjpbo-yhabkk?file=index.css

Regards,
Suresh.