We’re just getting started using Vaadin 7.3.3 + Valo in our application and we’re positively surprised with the power of Vaadin, however, we are currently struggling trying to use a custom font in our theme. We have created a custom theme called “burgundy” as shown below. Under the theme, we created a “fonts” folder containing all our fonts.
in the theme’s
styles.scss , we include the custom fonts (e.g. geosanslight)
However, when the page loads in the browser, the
geosanslight.ttf font is not loaded. inspecting the page, we can see that is trying to load it from the wrong place:
I have no idea where this
/valo/util/bourbon comes from. I have played with the path in different ways but cannot get the font recognized. Followed the recommendations in the
Book of Vaadin to the letter, to no avail.
Hope some of the vaadin gurus in this forum can help.
#First as i know it’s not v-font the mixin you need to include when you want to include your custom font .
second you need take a “5” step back if your fonts folder inside your theme folder directly somthing like
@include font('io7', '../../../../../themes/AfroTheme/fonts/io7/io7');
this code from my project and worked , AfroTheme is my theme folder name
io7 is the sub folder that i insert all my custom font into.
io7 ( the last one) … is the base font name …
as you know … you must have … filename.eot
,filename.svg,filename.ttf,filename.woff
to support your deffrent browsers … and all your deffrent files must have the same name → “the base name”.
The font and v-font mixins are basically the same, the name is just changed to avoid naming conflicts, and the old one is preserved for backwards compatibility (v.7.2).
Haven’t tried to load a custom font in a custom theme yet, so I’ll have to investigate myself also how the path resolution works in that case. There are also probably some differences how the Ruby Sass compiler and the Java Sass compiler handle it.
Thank you Jouni !
I confirmed that I’m using eclipse and vaadin 7.3.6. I’m not able to compile css with custom font using vaadin plugin
One more thing, I was able to compile scss with my custom font creating a dir with and copying there my font files
/VAADIN/themes/valo/util/
However, custom fonts were displayed only with Chrome , not with Firefox 33
If you succeed in your test please check custom font on Firefox 33
Luis, I used the tools in Firefox [Network]
to determine that the font files were using a bad url. (Jouni pointed me in the right direction.)
I discovered that my path information was incorrect so naturally I was getting a 404 error (viewable via the tools) when it attempted to load the font - related files.
I was attempting to integrate the
mfizz fonts . So I downloaded the fonts gzip file and unpacked to …/mytheme/fonts/font-mfizz. Here is the file structure:
The second parameter is the base name of the font files without an extension, including a relative path. Notice that the path is
relative to the base theme , where the mixin is defined, not the used theme. We recommend placing custom font files under a fonts folder in a theme.
So, by adding the following to the
styles.scss I was able to successfully load the files. NOTE: I have 4 (not 5) ‘…/’ sequences.
@include v-font(MfizzFontFamily, '../../../../mytheme/fonts/font-mfizz/font-mfizz');
After making this change and compiling the theme (mvn vaadin:compile-theme) I could start seeing the beautiful font icons.
I know that is an old post, but I’m stuck here. I’m trying to import the “Tisa” font, I followed the instructions from the book and from this post, but the font is not loaded from the browser. I’m using Vaadin 7.5.10, any clue how to use custom fonts in Vaadin?
Hope you all are doing well. So after following this thread and trying to apply a private font to one of our projects, one of our colleagues had a very interesting solution to our issue: “Following suggested steps on Documentation and Forums for Vaadin 7, font-family still does not appear for the intended characters”.
Then after consulting with him, he brought a solution that I am sharing over here in order to help other developers on this one:
I am working a project with vaadin8 and springboot. I designed a Ui for my web apps.I want to add a external stylesheet and want to design my appView.How can i add stylecheet?
Kamrul Hasan:
I am working a project with vaadin8 and springboot. I designed a Ui for my web apps.I want to add a external stylesheet and want to design my appView.How can i add stylecheet?