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

Changing the font family for all controls

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;

3 Replies

SP Sureshkumar P Syncfusion Team November 11, 2019 11:05 AM UTC

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-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  
Sureshkumar P 

LS Liam Sharp November 11, 2019 07:11 PM UTC

It works thank you very much!

PM Pandiyaraj Muniyandi Syncfusion Team November 12, 2019 08:35 AM UTC

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.

Live Chat Icon For mobile
Up arrow icon