Custom fonts not being loaded and recognized


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
, 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:

[font=courier new]
@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:

[font=courier new]
$v-font-family: “Tisa”;

@import “…/valo/valo.scss”;

@mixin mytheme {
@include valo;


My fonts are located in:


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 :frowning:



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

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.