Font doesn't work on new project from App Start

Flow
1

Just downloaded a new project from App Start. In App Start, the font looks correct (Work Sans). Running the app locally, it is incorrect (Times). I’ll look through the documentation and figure out how to fix it. Just wondering if this is a bug or user error?

@SpringBootApplication
@NpmPackage(value = "@fontsource/work-sans", version = "4.5.0")
@Theme(value = "av-equipment-suppliers")
public class Application implements AppShellConfigurator {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

@import url('./views/home-view.css');
@import url('@fontsource/work-sans/index.css');    html {
--lumo-font-family: Work Sans;

    }

{
  "lumoImports" : [ "typography", "color", "spacing", "badge", "utility" ],
  "assets" : {
    "@fontsource/work-sans" : {
      "*.css" : "@fontsource/work-sans",
      "files/*" : "@fontsource/work-sans/files"
    }
  }
}
2

Did you clean your dev environment? Like vaadin dance or such

1 Like
3

Thanks Christian. I’m not sure what you mean. Vaadin dance?

So far the only thing that works is to set a fallback.

html {
    --lumo-font-family: 'Work Sans', sans-serif;
}
4

Looking at the docs, it seems css from npm packages should be imported using the importCss key. assets should be used to import resources like icons and fonts

https://vaadin.com/docs/latest/styling/advanced/npm-packages#styles-from-npm

Edit: the posted code should work as well

1 Like
5

Thanks Marco. Sounds like you are saying that what I have is correct already?

6

I can’t check now, but if the code has been generated by start.vaadin.com, it should be correct.

The only thing I am not sure about is that in the style.css the font name is not quoted

1 Like
7

Unfortunately, I’ve never gotten changes in font to work. I tried modifying the fonts in the App Starter a few times. It never worked so stopped. This is the first time I’ve tried again in a few months.

8

I tested the provided configuration, and it works for me: the Work Sans font is correctly applied.

1 Like
9

hmm, ok, thanks. Must be something with my local setup. I can’t really mark a solution here, but is there some way to mark this post as closed or similar?