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

[arturo32]

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

[reopen of #6599]

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

1. Have a font inside src/assets/fonts/font.woff2;
2. Import it in a @font-face in the format src: url('assets/fonts/font.woff2') in the src/styles.scss file;
3. 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

[arturo32]

I researched a little more and discover some things:

1. The complete copy of the assets folder into the bundled output is intended;
2. 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 has a path like "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?

[dgp1130]

#26286 is likely relevant here, but I don't think we noticed a specific issue with font preloading. /cc @alan-agius4

[clydin]

The critical CSS inlining feature should be automatically adding preloads for the font file. Assuming it is in the critical path.
Are you using critical CSS inlining within the project?

Also of note is that v16 is no longer actively supported. Please consider upgrading to take advantage of the latest features and performance improvements in the newer versions.

[alan-agius4]

As @clydin mentioned, preloads are automatically added by the build system when critical CSS is enabled. Additionally, for Google and Adobe fonts, there's no need to save the CSS rules and files locally. Instead, during the build process, the CSS rule definitions are inlined. For more details, see Angular Workspace Configuration.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}