The problem

Two copies of the same font are appearing in the dist directory after ng build: One, located in the the assets/fonts folder, other in the root of dist (actually, as this projects is using i18n, at the root of each language folder):

The one at the "root" have a random string attached before the .woff2. Generated by a post-processor of CSS for what I understand. The bundled CSS in the dist folder references it.

Besides the increase in size of the build output, one thing that is not working is preloading fonts in the src/index.html file. Using href="assets/fonts/font.woff2" in a <link rel="preload"> tag will make the browser download this font, not use it, and download the version imported in the bundled CSS file in the root of dist.

Expected behavior

I expected the bundled CSS to reference the font file inside the assets folder, not it to create another font in the root of the output files. Is there a configuration in angular.json that may prevent this behavior? Do I have to create a webpack configuration file?

Minimal Reproduction

Have a font inside src/assets/fonts/font.woff2;
Import it in a @font-face in the format src: url('assets/fonts/font.woff2') in the src/styles.scss file;
Build the project using ng build command;

My settings is closer to @ziemerz in #6599 as I am also using i18n. So changing src: url('assets/fonts/font.woff2') to an absolute path like src: url('/assets/fonts/font.woff2') will not work for me.

Reproduction repository: https://github.com/arturo32/angular-fonts-paths/tree/main

Exception or Error

Your Environment

Angular CLI: 16.2.16
Node: 22.9.0 (Unsupported)
Package Manager: npm 10.8.3
OS: linux x64

Angular: 16.2.12
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.16
@angular-devkit/build-angular   16.2.16
@angular-devkit/core            16.2.16
@angular-devkit/schematics      16.2.16
@angular/cdk                    16.2.14
@angular/cli                    16.2.16
@angular/material               16.2.14
@schematics/angular             16.2.16
rxjs                            7.8.1
typescript                      5.1.6
zone.js                         0.13.3

Anything else relevant?

No response

I researched a little more and discover some things:

The complete copy of the assets folder into the bundled output is intended;
CSS resources are always hashed (random string as I called it) for browser cache reasons.

So the right thing to do would be to create a src/fonts folder and put my fonts there to avoid duplicated files. Ok.

This still does not solve my original problem which is: how can I reference this font in the index.html file? It seems that it does not go through the same process as the CSS resource links, i.e., if i reference a font in index.html with the path "fonts/my_font.woff2" it will be not updated in the bundle as "my_font.adahjkdasd.woff2".

Is there a way to link HTML links to this process?

angular / angular-cli

Duplication of local fonts files imported in SCSS (reopen of #6599) #28882

Command

Is this a regression?

The previous version in which this bug was not present was

Description