✅ Adding Roboto Font from NPM is not working

Flow
1

Hey,
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?

2

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

3

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

4

:white_check_mark: Adding Roboto Font from NPM is not working