Changing the font family for all controls

[Liam Sharp]

I have just successfully installed the components in Vue and Sass however I'd like to be able to change the themeing a bit to suit my design. I've tried overriding default styles for the button to change the font family after the import statements, but when I use chrome dev tools the styling I have a applied is there but is being overrode by the default styling somehow. Are there any variables we can change for the font family or is there something I'm doing wrong overriding these styles?

TLDR - The following doesn't work

@import '~@syncfusion/ej2-base/styles/fabric.css';
@import '~@syncfusion/ej2-buttons/styles/fabric.css';
@import '~@syncfusion/ej2-calendars/styles/fabric.css';
@import '~@syncfusion/ej2-dropdowns/styles/fabric.css';
@import '~@syncfusion/ej2-inputs/styles/fabric.css';
@import '~@syncfusion/ej2-navigations/styles/fabric.css';
@import '~@syncfusion/ej2-popups/styles/fabric.css';
@import '~@syncfusion/ej2-vue-schedule/styles/fabric.css';

.e-toolbar .e-tbar-btn {
    font-family: "Roboto", sans-serif !important;
}

[Sureshkumar P]

Hi Liam, 

 

Greetings from Syncfusion support. 

 

Yes, with ‘e-control', 'e-wrapper’ class, you can override the font-family of all Syncfusion components as follows 

 

.e-control, 

.e-wrapper { 

  font-family: "Roboto", sans-serif !important; 

} 

 

 

We created a sample based on your requirement. Please refer the sample here: https://codesandbox.io/s/vue-template-od6rz  

 

Regards, 

Sureshkumar P 

[Liam Sharp]

It works thank you very much!

[Pandiyaraj Muniyandi]

Hi Liam,  

  

Thanks for your update.  

  

We glad to hear that the provided solution resolved your problem. Kindly let us know if you need further assistance on this.
  

Regards,  

Pandiyaraj