Skip to content

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

Closed as not planned
@arturo32

Description

@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):

Image

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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions