Use local custom font?

Flow
1

Hi, i’m find this instruction: https://vaadin.com/docs/v8/framework/themes/themes-fonts.html
But not working for me(. Anybody can explain why?.. thanks!

Folder structure:

…/mytheme/fonts/Nosifer-Regular.ttf


My ​styles.scss:

[code]
@import “mytheme.scss”;
@import “addons.scss”;
@include font-face(‘MyFontFamily’,
‘…/…/…/…/mytheme/fonts/Nosifer-Regular.ttf’);

$v-app-loading-text: “Loading Resources…”;

// This file prefixes all rules with the theme name to avoid causing conflicts with other themes.
// The actual styles should be defined in mytheme.scss

.mytheme {
@include addons;
@include mytheme;

}
[/code]
My mytheme.scss:

@import "../valo/valo.scss";

@mixin mytheme {
  @include valo;

  // Insert your own theme rules here
  
  .mystyle {
    font-family: MyFontFamily;
    font-size: 25px;
    }


And code like:

[b]
label.setStyleName("mystyle");
[/b]
2

Hi,

One possible issue might be that you are only including one font format:

@include font-face('MyFontFamily', '../../../../mytheme/fonts/Nosifer-Regular.ttf');

As it is stated in the docs, not all browsers support any single font file format, so it is recommended to provide the font in all four formats to support all browsers.

– Goran

3

I have the same problem and loaded in mytheme/fonts/ all 4 files in different extensions.

styles.scss:

@import "mytheme.scss";
@import "addons.scss";
@include font-face('MyFontFamily', '../../../../mytheme/fonts/pt-sans-v11-cyrillic_latin-700');

$v-layout-margin: $v-layout-margin-top $v-layout-margin-right $v-layout-margin-bottom $v-layout-margin-left !default;

.mytheme {
  @include addons;
  @include mytheme;
}

mytheme.scss:

$v-font-family: "PT Sans";

@import "../valo/valo.scss";

@mixin mytheme {
     @include valo;

    .hw-H1 {
      font-size: 32px;
      font-family: MyFontFamily;
      font-style: normal;
      font-stretch: normal;
      line-height: 36px;
      letter-spacing: normal;
      color: #2F3445;
    }

Font files is exist in Sources (in F12 browser mode), and style correct linked with label, but font-family not working. Help if you know issue.

4

Hi Иван,

Which (Vaadin) version are you using?

5

Joacim Päivärinne:
Hi Иван,

Which (Vaadin) version are you using?

Vaadin 8.9.1

6

Hey Иван,

Did you try specifying the font weight and style? It seems the last two parameters are missing.

According to [this document]
(https://vaadin.com/docs/v8/framework/themes/themes-fonts.html) the format is:
@include font-face('MyFontFamily', '../../../../mytheme/fonts/myfontfamily', 400, normal);

Let me know if that still fails.

7

Joacim Päivärinne:

Let me know if that still fails.

Unfortunately, problem still actual. Browser (Edge & Chrome) replace font to Times New Roman. Thanks for finding mistakes in code.

Is anywhere Vaadin project with loading custom fonts? It may be helpful for checking.

8

Hi Иван,

Not sure if this helps, but you could try using @font-face. One example of that can be seen here (lines 1-7):
https://github.com/vaadin/material-theme-fw8/blob/master/material-theme-fw8/src/main/resources/VAADIN/themes/material-design/style/typography.scss

9

How to add your local custom fonts in your vaadin springbooot application.I am using vaadin 14.i am using font face but everytime i run my project on localhost ttf gets downloaded automatically…Please help