Custom fonts not being recognized

Hello,

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)

[font=courier new]
@import “addons.scss”;
@import “burgundy.scss”;

.burgundy {
@include addons;
@include burgundy;
}

@include v-font(GeosansLight, ‘…/burgundy/fonts/geosanslight’);

@include v-font(FontAwesome, ‘…/burgundy/fonts/fontawesome’);
[/font]

in the theme definition
burgundy.scss
, prior to importing valo, we declare the custom font using the font family:


$v-font-family: "
GeosansLight
", “Helvetica Neue”, “Open Sans”, sans-serif;
@import “…/valo/valo”;
@import “common”;

… etc

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:

[font=courier new]
http://localhost:8080/VAADIN/themes[b]
/valo/util/bourbon
[/b]/burgundy/fonts/geosanslight.ttf


[/font]

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.

Thanks in advance,

Luis

Hi, I have the same problem !
I’m trying to use some fontello icons
it seems that font directory is searched under
/VAADIN/themes/valo/util/ …

icons are showed after moving files under that directory

#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”.

:slight_smile:

I’m using v-font because command line saas compiler keeps saying that font is an an obsolete mixin and v-font must be used

However Book of Vaadin is saying to include font with this directive, not “5 step back” !

@include font(MyFontFamily,              '../../mytheme/fonts/myfontfamily');

Probably I did not understand Book of Vaadin but “5 step back” trick is not working for me both using font or v-font !

ok…

put it’s works …

i mean
go back five parent directory …

../../../../../


the result



as you see … “It’s about love” … use “JF Flat” font …

screenshot from my eclipse …



so …
your example will be …

@include font(MyFontFamily,              '../../../../../mytheme/fonts/myfontfamily');

your → myfontfamily is your base name …

i attached custom font i used currently into my project rename it myfontfamily

i hope it’s help …
i am so sorry if my words are not good understood put i’m trying to do my best …

17301.png
17302.png

Luis, did you ever get this figured out?

I am using 7.3.6 and following the instructions
HERE(in Book of Vaadin)
.

However, no content showing up in page using the custom font.

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.

I will try that and post my results. Thanks.

No I have not found the solution yet. We’ll try Mohammed’s recommendation today and see if it works. I’ll post the results.

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

VAADIN/themes/mytheme/fonts/font-mfizz/font-mfizz.css
VAADIN/themes/mytheme/fonts/font-mfizz/font-mfizz.eot
​VAADIN/themes/mytheme/fonts/font-mfizz/font-mfizz.svg
​VAADIN/themes/mytheme/fonts/font-mfizz/font-mfizz.ttf
​VAADIN/themes/mytheme/fonts/font-mfizz/font-mfizz.woff

The
Book of Vaadin indicates
that:


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.

Hope this helps you.

Hi Guys,

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?

Thanks,
Luiz

Huomenta,

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:


How to set custom font icon when using a Vaadin declarative ui

Kiitos ja ystävällisin terveisin,
Alan C.

I’ve got it working with this:

@include v-font(<FOMT-FAMIY>, '#{$font-icons-pathPrefix}../<THEME-NAME>/fonts/<FONT-FILENAMES-BASE>');

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?

Hey Kamrul,

Olli and I will help you over here:
https://vaadin.com/forum/thread/17311359/importing-html-and-css-in-vaadin-springboot-project

:slight_smile: