Custom fonts not being loaded and recognized

Hello,

I'm stuck trying to use a custom font "Tisa" in my theme. I have followed the instructions in the Vaadin Book and in this post, but I can't figure out why the fonts are not loaded.

I'm using Vaadin 7.5.10

In my theme's styles.scss, I include the custom fonts Tisa:

@import "designs.scss";
@import "addons.scss";
@import "mytheme.scss";

.mytheme {
  @include addons;
  @include mytheme;

  @include v-font('Tisa', '../../mytheme/fonts/tisapro-ita');
}

In the theme definition mytheme.scss, I declare the custom font using the font family:

$v-font-family: "Tisa";

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

@mixin mytheme {
  @include valo;
  ...
  ...
}

My fonts are located in:

/webapps/VAADIN/themes/mytheme/fonts/tisapro-ita.eof
/webapps/VAADIN/themes/mytheme/fonts/tisapro-ita.svg
/webapps/VAADIN/themes/mytheme/fonts/tisapro-ita.ttf
/webapps/VAADIN/themes/mytheme/fonts/tisapro-ita.woff
/webapps/VAADIN/themes/mytheme/fonts/tisapro-ita.woff2
  
However, when the page loads in the browser, the fonts are not loaded. I have played with the path in different ways but cannot get the font recognized. 

Hope some of the vaadin gurus in this forum can help me, because I'm really stuck here :(

Thanks,
Henrique

Hi,

Double check how Vaadin Font Icons are defined in theme. Your case should be analogous to that.

https://vaadin.com/icons/download

Note that font definition should not be inside mixin. That you seem to have wrong.

Also when you are making war package for production deployment, you need to check that your packaging script (ant or maven) is packaging the content from mytheme/fonts in correct way. Otherwise fonts will be missed.

Br. Tatu
 

The statement must be given in the styles.scss file outside the .mytheme {} block.