Changing global/default font in vaadin 7

Flow
1

What is the official way to change the default font/size in Vaadin 7?
There’s an older thread for vaadin 6 here: https://vaadin.com/forum#!/thread/827463
but couldn’t make it work for vaadin 7.

Edit: To be more specific, some components like TextFields are not picking up the change.

Thanks

2

More details: here’s the example css:

.v-textfield {
   font-family: "Trebuchet MS", "Calibri", Helvetica, Tahoma, Verdana, Arial, sans-serif;
} 
.v-app input {
   font-family: "Trebuchet MS", "Calibri", Helvetica, Tahoma, Verdana, Arial, sans-serif;
}

And here’s the firebug output:

I don’t have that “.mytheme.v-app input” defined anywhere in my css/scss, so i suppose it must be from the reindeer base theme?

3

The first selector is too weak to win the core themes selector. Try changing it to

[code]
input.v-textfield

or

div .v-textfield
[/code]to make it more specific. I know, it suck to over-specify.

The second selector is not matching the element, since I assume you’re including it inside a parent selector “.mytheme”. The .mytheme targets the same element as .v-app, therefore you need to use the parent selector reference “&” in your nested selector:[code]
&.v-app input {

}
[/code]To change all the theme’s fonts at once, try something like this (copied from the Reindeer common.scss:

&.v-app,
.v-window,
.v-popupview-popup,
.v-tooltip,
&.v-app input,
&.v-app select,
&.v-app button,
&.v-app textarea,
.v-window input,
.v-window select,
.v-window button,
.v-window textarea,
.v-popupview-popup input,
.v-popupview-popup select,
.v-popupview-popup button,
.v-popupview-popup textarea,
.v-filterselect-suggestpopup,
.v-datefield-popup,
.v-contextmenu,
.v-Notification,
.v-menubar-submenu,
.v-drag-element,
.v-table-header-drag {
	
}

We’re currently working on a new core theme, which relies more heavily on Sass, and will make changing the easier than this, by using variables.