How to set custom font in whole Vaadin 7 application - css

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

Answer 2

This Question is about the older version 7 of Vaadin. Here's an Answer for those with the same need in current Vaadin 14.
Vaadin Flow
The newer generation of Vaadin version 10 and later is known as Flow. This revamp of Vaadin now uses the Lumo theme by default. The theme is designed to be easy to alter, changing font, size, color, spacing, and so on.
The Vaadin team now offers an online editor to make changing the theme easy, with a palette of settings to tweak, and a visual display to see the effects. When you are satisfied, you can download the theme settings for use in your Vaadin project.
In particular, on the Typography tab with its Font family pop-up menu, you can choose a default font for the entire app. For finer control of your Web typography, you can open the Advanced section to edit the CSS font stack.
By the way, Lumo has both a light and a dark mode, the dark shown here.