Fonts are not resolved when using base href

[josago97]

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

I'm trying to deploy an Angular application to GitHub Pages using GitHub Actions. I've set the base href correctly, but the sources aren't showing up. The routes to get the sources ignore the base href. I've also tried specifying the deploy-url, but I get the same result.

Minimal Reproduction

1. Create a project.
2. Add a custom font that's in the public folder.

3. Build the project with a base href and deploy it.
4. Note that the font URL ignores the base href.

Exception or Error

Your Environment

Angular CLI: 19.1.7
Node: 22.14.0
Package Manager: npm 10.9.2
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1901.7 (cli-only)
@angular-devkit/core         19.1.7 (cli-only)
@angular-devkit/schematics   19.1.7 (cli-only)
@schematics/angular          19.1.7 (cli-only)

Anything else relevant?

No response

[clydin]

Root relative URLs (those starting with a /) ignore the HTML base HREF. This is browser behavior and not specific to Angular.

[josago97]

And if I use those that begin with ./, the Angular compiler fails. So, what's the best way to fix this problem?

[clydin]

Ideally, the font should be placed in a location accessible to the referencing file at build time via a relative path. This allows the build system to automatically process the file. This has several benefits including long-term cache based file hashing and ensuring the file is included in the output at the correct location for the application. If this is not preferred and you wish to manually manage the inclusion of the file, the file can be included in the public assets directory and then also marked as external via the externalDependencies build option. The value used in the option should match the value used in the CSS file.

[josago97]

I have the fonts in a folder called fonts within the public folder. I want the settings I specify in the base href to be respected when I deploy the application. The Angular compiler only compiles if I add / to the paths in styles.css. Therefore, Angular doesn't allow me to implement this ideal solution.

[clydin]

For the first option where the build system processes the font file, you can put the font file next to the CSS file and then use ./my-font.ttf (using the name of the actual font file instead of my-font). It doesn't need to be directly next to it as long as the path is relative to the build time location on disk.

For the later option where the file is put into the public assets, remove the leading / from the CSS file for the font path and then add the following to the build options:

"externalDependencies": ["fonts/my-font.ttf"],

For this second option, the build system will not verify that the font is actually present in the output.

[josago97]

Okay, it works with externalDependencies. However, I can't find any documentation for that attribute. Could you please post it here? Thanks.

[montella1507]

We had the same problem, because our applications are usually placed inside subdirectory (with baseHref.... ).

I wonder why is CLI / build system trying to resolve URL during build time - it did not inline it inside any file.. so is there any reason?