Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
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.