CODEWITHSUNDEEP
fontsthemesvaadin
JaneVi
JaneVi

Reputation: 199

How to use Valo fonts in custom theme

The new Valo theme in Vaadin 7.3 and later comes bundled with some fonts:

I'm struggling with adding these Valo fonts into my custom theme. This is what I have but it doesn't seem to work.

styles.scss

$v-font-family: 'Lato', sans-serif, 'Open Sans';

@import "../valo/valo";

.myTheme {

@include valo;

@import "myRules"; 

}

This is what I get in the console:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) http://name/name/VAADIN/themes/myTheme/Lato-regular-webfont.woff

It should point to http://name/name/VAADIN/themes/valo/Lato-regular-webfont.woff

I guess I forgot about something but I've searched and it's not mentioned in the Book of Vaadin.

Upvotes: 2

Views: 905

Answers (1)

JaneVi
JaneVi

Reputation: 199

The problem is resolved, I was missing this:

$v-relative-paths: false;

source: http://vaadin.com/download/book-of-vaadin/current-br/html/themes.valo.html

Theme Compilation and Optimization

$v-relative-paths (default: false) This flags specifies whether relative URL paths are relative to the currently parsed SCSS file or to the compilation root file, so that paths are correct for different resources. Vaadin theme compiler parses URL paths differently from the regular Sass compiler (Vaadin modifies relative URL paths). Use false for Ruby compiler and true for Vaadin compiler.

Upvotes: 3

Related Questions