✅ Adding Roboto Font from NPM is not working

I’m currently trying to add the Roboto font to the application using the npm package @fontsource/roboto.

The package has the following file structure:

/files (all font files)
index.css (contains the @font-face for Roboto 400 normal)

I’ve added following to the theme.json:

  "lumoImports" : [ "typography", "color", "spacing", "badge", "utility" ],
  "assets" : {
    "@fontsource/roboto" : {
      "*.css" : "@fontsource/roboto",
      "files/*" : "@fontsource/roboto/files"

and added following to the styles.css:

@import url('./@fontsource/roboto/index.css');

Also tried without the ./ prefix. All other selectors of this class are included.

Somehow the font is not included. What did I do wrong?

I suppose pattern for files should be files/**
Also, did you add the @NpmPackage annotation to import @fontsource/roboto package?

Yeah did so. I already found out its working with importCss @fontsource/roboto/index.css only without this mapping. Thanks tho!

:white_check_mark: Adding Roboto Font from NPM is not working