We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

global font-family


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


5 Replies 1 reply marked as answer

TJ Theveshwar Jayakumar Syncfusion Team January 10, 2023 04:00 AM UTC

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



Marked as answer

MA Marek January 24, 2023 09:19 PM UTC

Thank you for your reply greetings

TJ Theveshwar Jayakumar Syncfusion Team January 25, 2023 05:16 AM UTC

Hi Marek,


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




GE George June 16, 2024 10:00 AM UTC

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

SA SureshRajan Alagarsamy Syncfusion Team June 21, 2024 01:12 PM UTC

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.



.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


Live Chat Icon For mobile
Up arrow icon