How to set custom font in whole Vaadin 7 application

Question

I defined custom font for my application because by default characters like 'č' did render with Arial font while rest of application rendered with "Open Sans Light". In styles.scss:

@include v-font('LocalFont', '../../../../mytheme/fonts/open-sans-v15-latin-ext_latin-300');
...
...

From rendered webpage I see font family used depends on styles.css:

.mytheme.v-app, .mytheme.v-app-loading {
  font: 300 16px/1.55 "Open Sans", sans-serif;

but I see no way affecting it. In mytheme.scss within @mixin mytheme { I tried to define:

.v-app, .v-app-loading {
    font: 300 16px/1.55 LocalFont, sans-serif;
}

.mytheme.v-app, .mytheme.v-app-loading {
    font: 300 16px/1.55 LocalFont, sans-serif;
}

but in styles.css it is build as:

.mytheme .v-app, .mytheme .v-app-loading {
  font: 300 16px/1.55 LocalFont, sans-serif;
}

.mytheme .mytheme.v-app, .mytheme .mytheme.v-app-loading {
  font: 300 16px/1.55 LocalFont, sans-serif;
}

and that will not use my local fonts (unless I remove spaces after .mytheme).

Is there a way to affect font family in .mytheme.v-app, .mytheme.v-app-loading {?

As a workaround I defined this in my theme:

.v-ui{
    font: 300 16px/1.55 LocalFont, sans-serif;
}

.v-tooltip{
    font: 300 16px/1.55 LocalFont, sans-serif;
}

.v-window{
    font: 300 16px/1.55 LocalFont, sans-serif;
}

.v-Notification{
    font: 300 16px/1.55 LocalFont, sans-serif;
}

This covers probably all cases, but I am not sure if vaadin could add element that is direct child of element with v-app css class and uses other css class. Is this workaround applying to all cases - does vaadin use other css classes that are direct child of v-app class?

Notes:

Vaadin documentation only states to use font family in my styles.

I am using server fonts because application is behind proxy and using web fonts for rendering characters like 'č' fails because some clients have no access outside application server.

Initally I tried to define my fonts in styles.scss like:

@include v-font('Open Sans', '../../../../mytheme/fonts/open-sans-v15-latin-ext_latin-300');
...
@include v-font('Open Sans Light', '../../../../mytheme/fonts/open-sans-v15-latin-ext_latin-300');
...

But it did not used my fonts for rendering 'č', not sure why.

Answer 1

So.. if you've called your theme: my-theme

In the file: my-theme.scss

You need to add at the top the file: $v-font-family: "Open Sans", sans-serif;

Here's a link to the other Valo Theme variables