Switching from Reindeer to Valo, and changing font at a global level

I need to change my application’s font, and am having trouble figuring out how to do this.

I am mainly a back-end and business logic person, so we used Vaadin because it let us get a web application going without knowing that much about web technology. We started with Vaadin 7.1.12 with the redindeer theme, and have moved to 7.3.5. So far, so good, but now I need to change the font being used by the application. I tried putting web fonts (WOFF) in a fonts directory, and doing most of what was suggested in thread 8686152, including a variant of this done 4 months ago by Bob:
@include font(MyFontFamily, ‘…/…/mytheme/fonts/myfontfamily’);

I have taken the “5 steps back” approach, and every step between 1 and 5. Then I noticed that the valo theme was being extended, and tried switching to that, thinking that maybe valo was a better starting point.

Boy did I make a mess!

The valo theme test looks good, but the wiki page made me think I could just change my reindeer references to valo, and from then on the changes would be enhancements with $v-this and $v-that.

So like I said, backend and business logic, I am in over my head here.

When I set my scss file to start out like this:

/* @import "../reindeer/reindeer.scss"; */
@import "../valo/valo";
/* This contains all of your theme.*/
/* If somebody wants to extend the theme she will include this mixin. */
@mixin designtracker {
  /* Include all the styles from the reindeer theme */
  /* @include reindeer; */
  @include valo;

  /* Insert your theme rules here */

My application went from this:
<before.png>
to this:
<after.png>

So clearly I am missing something on how to switch my style’s base from reindeer to valo. When I directly set valo as the theme in my ui class, the style is properly applied. Still, I believe reindeer is a better base for my application after seeing valo in action on my application, but mainly I wonder what is the best way (if even possible) to globally change the font used by an application? Do I have to override the style of every component I use, or is there a way to use font families in a scss/SASS to get things changed at the top level?

18781.png
18782.png

Hi,

i had also at the beginning some problems with valo style.

I played around with the global variables in the scss.

Here is my solution:

[code]
// Global variable overrides. Must be declared before importing Valo.

// Defines the plaintext font size, weight and family. Font size affects general component sizing.
$v-font-size: 14px;
$v-line-height: 1.0;
//$v-font-weight: 400;
//$v-font-family: “Open Sans”, sans-serif;
$v-font-family: Arial, Helvetica, sans-serif;

// Defines the border used by all components.
//$v-border: 1px solid (v-shade 0.7);
//$v-border-radius: 4px;

// Affects the color of some component elements, e.g Button, Panel title, etc
//$v-background-color: hsl(210, 0%, 98%);
// Affects the color of content areas, e.g Panel and Window content, TextField input etc
//$v-app-background-color: $v-background-color;

// Affects the visual appearance of all components
//$v-gradient: v-linear 8%;
//$v-bevel-depth: 30%;
//$v-shadow-opacity: 5%;
//$v-border-radius: 3px;

$v-unit-size: 22px;
//$v-layout-margin-left: 10px;
//$v-layout-margin-bottom: 2px;
$v-layout-spacing-vertical: 6px;
$v-layout-spacing-horizontal: 6px;

// Defines colors for indicating status (focus, success, failure)
//$v-focus-color: valo-focus-color(); // Calculates a suitable color automatically
//$v-friendly-color: #2c9720;
//$v-error-indicator-color: #ed473b;

// For more information, see: https://vaadin.com/book/-/page/themes.valo.html
// Example variants can be copy/pasted from https://vaadin.com/wiki/-/wiki/Main/Valo+Examples

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

@mixin MyTheme {
@include valo;



[/code]maybe it helps you

Thank you Gernot, that definitely works for getting valo up and running for me. Very helpful.
I am wondering if the same basic font controls (especially $v-font-family) are available in some form in reindeer? I imagine the mechanism would be different because from what I have seen, settings that start with $v- are vero controls.

As a followup, I am trying to get a custom web font (Vera Mono) loaded as the base font in my application. I am doing this while extending vero, just to get it running in the latest theme before I try to go back to reindeer.
My fonts are arranged like this currently:
(Resources.png)
So that relative to my scss files, the fonts are in fonts/
My styles.scss looks like this:

[code]
/* Web font to use throughout the DesignTracker application (must be outside the .designtracker{} block) /
$v-relative-paths: false;
/
@include v-font(VeraMonoTTF,‘fonts/VeraTTF/VeraMono’);*/
@include v-font(VeraMonoWOFF,‘fonts/VeraWOFF1/VeraMono’);

@import “addons.scss”;
@import “designtracker.scss”;

/* This file prefixes all rules with the theme name to avoid causing conflicts with other themes. /
/
The actual styles should be defined in designtracker.scss */
.designtracker {
@include addons;
@include designtracker;
}
[/code]One of the threads touching on custom fonts mentioned $v-relative-paths as seen here in line 2. Makes no difference if it is true or false, I do not get the Vera font loaded either way. I could not tell if that setting belonged here or in my specific scss, so I just put it in both for now.

My designtracker.scss file starts out largely like Gernot’s solution above, but with font additions. Those look like this:

// Defines the plaintext font size, weight and family. Font size affects general component sizing. $v-relative-paths: false; $v-font-size: 12px; $v-line-height: 1.0; //$v-font-weight: 400; //$v-font-family: "Open Sans", sans-serif; $v-font-family: VeraMonoWOFF; As mentioned above, $v-relative-paths is here too since I do not know where it is supposed to live.
I have looked at this font (its ttf version, anyway), and know I am not getting that font loaded. When I append sans-serif to my $v-font-family setting, the sans serif font comes up, so I know my font is not being loaded.

Another post (thread 8686152 mentioned putting in “five steps back” in the path since the definition was at the base rather than down in the theme, so that my @include in styles.scss looked like this:

@include v-font(VeraMonoWOFF,'../../../../../designtracker/fonts/VeraWOFF1/VeraMono');

This, with and without the $v-relative-path, made no difference, and I took paths out, one by one, rebuilding the theme and refreshing each time to see if the font was found, to no avail.

At this point I have shotgunned this thing to death and have to admit defeat. Can anyone offer some insight or pointers on the custom font issue? I am stuck.

18791.png

OK, how about font additions to the theme itself?

I downloaded the latest vaadin themes jar that I could find (vaadin-themes-7.1.7) and looked in the reindeer and base directories to see if adding fonts to a copy of reindeer would solve my problem.

Note that I’m looking for speed of solution, not elegance.

All I saw was a couple of fonts in base/debug, so I doubt that I am in the right place here. FontAwesome ia available in the same place in github, but is that the only font used in reindeer?

I’ll use Valo if I have to, but it’s very different from reindeer. Even then, I am unable to get my own fonts loaded into Valo.

Has anybody else run into the font problem I am seeing?

Hi Pierce,

If you are happy with reindeer and only want to change the font, valo is definitely overkill. In that case, just import the font first, and then apply it to your .v-app element, like so:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

.v-app {
    font-family: 'Open Sans', sans-serif;
}

If you want to use Valo, pay attention to the order in which you do things. First, import the font, then set the v-font-family parameter, and then lastly import the Valo theme. As SCSS is a preprocessor, you need to define the paremeters for the processor before calling it (with the include).

Lastly, with Valo you need to remember that in a production environment, the SCSS will not get compiled for you on the fly like in development mode, so you need to compile the css ahead of time. See the wiki or example maven artefact for examples of doing this.

Thanks Marcus! I’d be happy just doing this with Reindeer. My problem stems from the fact that the font I have (Vera) is in my project (woff and ttf versions available to try). I just verified that Vera is not on fonts.googleapis.com. Based on that would the @import url notation you show be workable as an @include? My attempt at loading it into Valio was:
@include v-font(VeraMonoWOFF,‘fonts/VeraWOFF1/VeraMono’);

I never got that working, with many many iterations on the font specification (2nd parameter).

If you are using local fonts, you just need to specify paths to them like this
https://css-tricks.com/snippets/css/using-font-face/

Again, make sure you’ve imported the font before trying to use it.

OK Marcus, I am problably close, I still can’t get it to work. Here’s what I have so far:

styles.scss:

[code]
/* @import url(‘fonts/TimesRoman/Time_Roman.ttf’); with/without extension */
@font-face {
font-family: ‘MyWebFont’;
src: url(‘fonts/TimesRoman/Time_Roman.ttf’) format(‘truetype’);
}

@import “addons.scss”;
@import “designtracker.scss”;

/* This file prefixes all rules with the theme name to avoid causing conflicts with other themes. /
/
The actual styles should be defined in designtracker.scss */
.designtracker {
@include addons;
@include designtracker;
}
[/code]This font-face syntax is used in the css-tricks.com url you referenced above. The fonts directory is at the same level as the scss files (all at VAADIN/themes/designtracker, so there is a VAADIN/themes/designtrakcer/fonts directory, etc)

If I understand correctly, with this font-face definition, my designtracker.scss acn call out the font-family in my v-browserframe element in my designtracker mixin as follows:

designtracker.scss (first part only):

@import "../reindeer/reindeer.scss"; 

@mixin designtracker {
  /* Include all the styles from the reindeer theme */
   @include reindeer; 
.v-browserframe {
    font-family: MyWebFont;
    overflow:hidden;
  }
  /* Insert your theme rules here */

I purposely switched to a times roman font just to make something obvious happen, but I stil get the same old sans serif font. After maning these changes (and other iterations like it) I compiled both the theme and the widgetset before starting the application back up.

Any other ideas here as to how to get a custom font into a Vaadin application, or did I do something wrong in the files above?

Looks like you are setting the font family for the wrong CSS class, try

@mixin designtracker {
  .v-app {
    font-family:...;
  }
}

OK, I was reading too much into that, thinking that .v-app would be changed to the application name.

I made that change and it still does not show up yet. I compile the theme and the widgetset each time, and even refresh the applicaiton in the Project Explorer tree with F5 each time. I only do this after stopping the application, and then start it again and refresh the page, but nothing changes. (see normal_font.PNG)
So currently I have the following in designtracker.scss (very top):

@import "../reindeer/reindeer.scss"; 

@mixin designtracker {
  /* putting this ahead of the include reindeer directive */
  .v-app {
    font-family: MyWebFont;
  }
  
  /* Include all the styles from the reindeer theme */
   @include reindeer; 
  /* Insert your theme rules here */

My styles.scss looks like this:

/* @import url('fonts/TimesRoman/Time_Roman.ttf'); with/without extension */
@font-face {
  font-family: 'MyWebFont';
  src:  url('fonts/TimesRoman/Time_Roman.ttf') format('truetype');
}

@import "addons.scss";
@import "designtracker.scss";

/* This file prefixes all rules with the theme name to avoid causing conflicts with other themes. */
/* The actual styles should be defined in designtracker.scss */
.designtracker {
  @include addons;
  @include designtracker;
}

You mention importing the font before using it. Does the @font-face directive in styles do that so that I can use it in designtracker.scss, or am I still missing a step?

18798.png

In case I had a plug-in problem with Vaadin 7.3.5, I updated all of my Eclipse plug-ins, bringing everything including eclipse JEE plugins, ivy, and vaadin plug-ins up to date. I rebuilt the theme and widgetset, but nothing changed.

So thinking that fresh plug-ins might mean the original docs were the place to be, I went back to the book of vaadin’s description of custom fonts on section 7.9. Given my application, that meant the following in styles.scss should work:

[code]
@include font(MyWebFont, ‘…/…/designtracker/fonts/TimesRoman/Time_Roman’);
@import “addons.scss”;
@import “designtracker.scss”;

/* This file prefixes all rules with the theme name to avoid causing conflicts with other themes. /
/
The actual styles should be defined in designtracker.scss */
.designtracker {
@include addons;
@include designtracker;
}
[/code]And by the way I got down to …/…/designtracker/fonts etc by starting “5 steps back” since others had success with this, and slowly trimming it down one entry at a time, stopping server,recompiling theme/widgetset/theme/refresh/start server/observe-results until it resembled BOV.

My designtracker.scss now starts off like this:

[code]
@import “…/reindeer/reindeer.scss”;

@mixin designtracker {
/* putting this ahead of the include reindeer directive */
.v-app {
font-family: MyWebFont;
}
[/code]Is .v-app still the right place for the font-family setting? BOV just shows this:

.mystyle { font-family: MyFontFamily; }

It’s not clear to me exactly what “.mystyle” is in this context, and how it relates to my scss.

Earlier, before the plug-in update, my styles.scss would at least show something relating to my font. Not any more.

Now when I compile the theme, then widgetset and theme, then refresh the project tree with F5 (not sure how much of that is really necessary), my styles.css looks like this:

...
.v-vaadin-version:after {
    content: "7.3.5";
}

.v-generated-body {
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    overflow: hidden;
}

.v-modal-window-open {
    overflow: hidden;
}

@font-face {
    font-family: FontAwesome;
    src: url(../base/fonts/fontawesome-webfont.eot);
    src: url(../base/fonts/fontawesome-webfont.eot?#iefix) format("embedded-opentype"), url(../base/fonts/fontawesome-webfont.woff) format("woff"), url(../base/fonts/fontawesome-webfont.ttf) format("truetype"), url(../base/fonts/fontawesome-webfont.svg) format("svg");
    font-weight: normal;
    font-style: normal;
}

.FontAwesome {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
}

...

.v-generated-body {
    background: #f5f5f5;
}

.designtracker .v-app {
    font-family: MyWebFont;
}

FontAwesome is represented with a font-face entry and a .FontAwesome entry, but nothing is there for my font other then the expected(?) font-family entry in .designtracker .v-app

At this point I don’t trust BOV on this subject and am really curious how his is all supposed to work.

Back to trying the Valo theme, just to get something to work. I am hoping the solution seen by John Kroubalkian in thread 8614199 will work for me.

Marcus, you mentioned several steps to go through to use the Valo theme, and the last one was compiling the SCSS. Does this just mean using the toolbar entry for Compile Theme/Compile Widgetset and Theme needs to be used?

Also, the theme article on the wiki states:
“NOTE that if you’re using Ivy (the default if you’re using the Eclipse plugin), you must make sure to get the appropriate dependencies on your classpath some other way (since they are not present in WEB-INF/lib). In Eclipse, use the Run -dialog to inherit the classpath from your project.”

I am using ivy, but am not sure what this statement is telling me to do.