Valo Theme Font displays differently for different languages

Flow
1

Hello,

without specifying any font changes in scss files (ie using the default OpenSans) we get different font styling for English and different for Greek (see attached image greek is bold and english is light -all of this in the same grid-).

We then tried to load our own OpenSans ttf files (downloaded from Google fonts and having enabled the “greek script” support. However we still miss something.

In the styles.scss we include all the different variations of OpenSans

@include v-font(OpenSans-Bold, '../../../../custom-valo-theme/fonts/OpenSans/OpenSans-Bold'); @include v-font(OpenSans-BoldItalic, '../../../../custom-valo-theme/fonts/OpenSans/OpenSans-BoldItalic'); @include v-font(OpenSans-ExtraBold, '../../../../custom-valo-theme/fonts/OpenSans/OpenSans-ExtraBold'); @include v-font(OpenSans-ExtraBoldItalic, '../../../../custom-valo-theme/fonts/OpenSans/OpenSans-ExtraBoldItalic'); @include v-font(OpenSans-Italic, '../../../../custom-valo-theme/fonts/OpenSans/OpenSans-Italic'); @include v-font(OpenSans-Light, '../../../../custom-valo-theme/fonts/OpenSans/OpenSans-Light'); @include v-font(OpenSans-LightItalic, '../../../../custom-valo-theme/fonts/OpenSans/OpenSans-LightItalic'); @include v-font(OpenSans-Regular, '../../../../custom-valo-theme/fonts/OpenSans/OpenSans-Regular'); @include v-font(OpenSans-Semibold, '../../../../custom-valo-theme/fonts/OpenSans/OpenSans-Semibold'); @include v-font(OpenSans-SemiboldItalic, '../../../../custom-valo-theme/fonts/OpenSans/OpenSans-SemiboldItalic'); but in our custom-valo-theme.scss

we can only use one of the variations above.

Is there a way to either have vaadin display all languages consistently using the included valo fonts or
load and use a whole family of external fonts?

We use Vaadin 7.5.7 and our custom theme imports valo theme.

Regards,
George
22647.png

2

Hi George,

did you try this on different browsers and operating systems? Is the outcome consistent throughout?

Best,
Enver

3

Hi,

yes behavior is consistent in Windows (Chrome/Firefox), Mac OS X (Safari), iOS (Safari), Android (Chrome).

Greek letters appear stronger (almost bold) and latin letters appear lighter.

I would be OK if I could use all the open-sans font variations by importing all ttf files under the same “font family” but I don’t know how to do that.

4

Hey George,

If you inspect your application in the browser, are the font resources loaded correctly?

Another possibility is that font anti-aliasing might be active for one, but not all fonts.

5

Hello,

this is what I get on Inspect the application:

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">

However If I inspect the row of the grid, all cells are set to render with Open Sans but

cell with
Greek
characters gets rendered with
Arial
and cell with
Latin
characters gets rendered with
Open Sans Light
. So I guess loaded Open Sans does not include Greek characters.

I think Application loads Roboto and Grid tries to render Open Sans.

Can I fix this?

Is there a way to define my own local fonts but with many variations (Bold Italic etc ie more than one file per fort family) or does it have to be 1 font - 1 file?

6

Have exactly the same problem, not only in Grid but throughout the application (Labels/Tables etc). Greek fonts appear bold while the Latin characters appear light.
Have you come up with a solution?

7

I managed to import Google Fonts with Greek script. I did not manage to import my own local fonts if the family conists of more than one file (ie: OpenSans-Regular.ttf, OpenSans-Italic.ttf, OpenSans-Bold.ttf, etc). I can import and use one of them at a time.

Anyway you can use the online google fonts by adding this line before the class declaration in your main UI class

@StyleSheet("http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,700,700italic&subset=greek,latin")
public class MainUI extends UI {

}
8

Thanks for that, but the problem is that I wanted the fonts to be offline, since the application is in controlled environment (no internet access).
Anyway,taking your advice I’ve managed to solve this by doing the following:

  1. https://google-webfonts-helper.herokuapp.com/fonts/open-sans?subsets=latin,greek
  2. Selected all the font sizes I am using,
  3. Copy-Paste the css to the theme.scss
  4. Copy the files to the fonts folder of the theme (in this case, change the default …/fonts to fonts at the css)
  5. Compile the theme and run.
    Now you don’t have to connect to google for the fonts! :stuck_out_tongue:
9

Thanks, it worked!

10

Hey guys,

Yeah, the problem or missing link was the character set(s). If you’re using Google Fonts, you have to check Greek (and possibly Greek-Extended).

@StyleSheet(“https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,greek,greek-ext,latin-ext”)

^^ That should import all Latin and Greek character sets and styles.