Custom web font in custom theme

Support
#1

Hello,

I created a new theme on top of the “halo” theme and everything works fine. Now I tried to import a Google font with:


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

This import statement is inside the style.scss file:


@import "halo-defaults";
@import "com.company.brandingtest/halo-ext-defaults";
@import "app-components";
@import "com.company.brandingtest/halo-ext";
@import  url(http://fonts.googleapis.com/css?family=Roboto);

.halo {
  // include auto-generated app components SCSS
  @include app_components;
  
  @include com_company_brandingtest-halo-ext;
}

The generated style.css file contains this import statement but is “enriched” with this:


@import url(http://fonts.googleapis.com/css?family=Roboto?v=2017_03_15_16_07);

Google cannot handle those parameters at the moment. Can I somehow suppress this without downloading the font locally?

Thanks in advance.

2 Likes
#2

Hi,

It seems, there is a bug in our SCSS build task. Unfortunately, this behaviour cannot be turn off.

There is a workaround. You can add simple post-processing step for CSS file to your build.gradle script:


configure(webModule) {
...
    task buildScssThemes(type: CubaWebScssThemeCreation)
    task deployThemes(type: CubaDeployThemeTask, dependsOn: buildScssThemes)
    assemble.dependsOn buildScssThemes

    // add post-processing hack
    buildScssThemes.doLast {
        def cssFile = file("$buildDir/themes-tmp/VAADIN/themes/halo/styles.css")
        def css = cssFile.text
        cssFile.text = css.replaceAll('family=Roboto.*?\\)', 'family=Roboto)')
    }
}

Thank you for reporting the problem. I’ve created an issue in our bug tracker, we will try to include fix to one of the next bug fix releases.

#3

Hi
Tried to do the same on version 6.5, but it is not working for me.

styles.scss


@import url(https://fonts.googleapis.com/css?family=Roboto);

build.gradle:


  buildScssThemes.doLast {
        def cssFile = file("$buildDir/themes-tmp/VAADIN/themes/halo/styles.css")
        def css = cssFile.text
        cssFile.text = css.replaceAll('family=Roboto.*?\\)', 'family=Roboto)')
    }

File styles.css in themes-tmp… folder seems to be replaced successfully, but it does not have any effect.

But if I edit styles.css and one inside styles.css.gz archive at build\tomcat\webapps\app\VAADIN\themes\halo</b> folder, then it works.

It seems to me that styles.css should be hacked and then gzipped into the archive for it to work.

Thanks.

Regards

Darius

#4

Hi, I’m having a similar problem using a “background-image” in halo-ext.scss for my custom theme.
In scss I have “background: url(images/instFee.png)” but in the compiles style sheet the output is: "background url(com.company.tojm/images/instFee.png?v=2017_05_19_23_50)"
The problem here is the “com.company.tojm/” prefix which causes the image to not be found…
How can this be solved?
I’m using Cuba studio/platform 6.5.1
Thank you!

— Edit—
For some reason its now working, even with the prefix… it must have been a different cause…
Solved.

#5

Hi,

This prefix is just directory name, it should not lead to problems with CSS. The problem stated above is related to Google Fonts web service, not to web resources of a project.

#6

Hi,

The issue is fixed in 6.5.2. We are going to publish it next week. You can check it if you temporary switch your platform version to 6.5-SNAPSHOT. We publish -SNAPSHOT versions to collect additional feedback for Work in Progress features and give you ability to check our fixes.

#7

:ticket: See the following issue in our bug tracker:

https://youtrack.cuba-platform.com/issue/PL-8823