Custom fonts not being loaded and recognized

Flow
1

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:

[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’);
}
[/font]

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;
…
…
}
[/font]

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

Thanks,
Henrique

2

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

3

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