How to import font assets?

I am trying to create an Angular 19 library with a personalized fonts linked directly into a global SCSS file. On build time, I have the exact same error being raised by builder:

src/lib/label/label.component.scss:3:11:
      3 │   src: url("../../assets/styles||file:../fonts/");
        ╵            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Preprocessor stylesheets may not show the exact file location of the error.

I've tried with various links and formats for my assets, event exporting it but nothing has worked.

Please find a reproductive app with the bug here

Thank you very much for your help !

Solution

I was able to fix my issue. I needed to run the following steps:

In my src/assets/styles/fonts.scss file, I first corrected the broken url to match to a font file.
Then, I changed it to not start with a relative link from the file I am, but use an absolute link instead. By default, / refers to the folder where ng-packge.json is located.
I updated the ng-package assets to create an output folder with all the fonts I needed to use.

Please find below the new versions of both files:

src/assets/styles/fonts.scss:

    @font-face {
      font-family: "Roboto";
      src: url("/fonts/Roboto-Regular.woff2");
    }
    
    $base: "Roboto";

ng-package.json:

    {
      "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
      "dest": "../../dist/fonts-assets-scss",
      "lib": {
        "entryFile": "src/public-api.ts"
      },
      "assets": [
        {"input": "src/assets/fonts", "glob": "**/*.woff2", "output": "fonts" }
      ]
    }

Please find the corrected code on this branch