Solvedangular cli Angular CLI is modifying the paths to fonts set in @font-face to point to the root directory in a production build

Bug Report or Feature Request (mark with an x)

- [ x] bug report -> found similar issue which i believe to have been closed in error: #3143 


Output from: `ng --version`.
@angular/cli: 1.1.0
node: 8.0.0
os: darwin x64
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.1.0
@angular/compiler-cli: 4.1.3
@angular/language-service: 4.1.3

Repro steps.

ng new testapp --style scss

Then created new directory in ./src/assets/fonts/ which includes a set of custom font files like Gibson-Light-webfont.eot for example.

Then in my styles.scss file i reference those fonts like this:

@font-face {
    font-family: 'gibson_package';
    src: url('assets/fonts/Gibson-Light-webfont.eot');

Then i run ng build --prod

In my ./dist directory, the build process correctly copies my fonts to ./dist/assets/fonts/* as expected, but it also included duplicates of all of my fonts right in the root of my ./dist directory which i did not expect and the paths set in @font-face url's are changed to point to the root.

The log given by the failure.

No errors are output.

Desired functionality.

That the production build only copy my fonts to the ./dist/assets/fonts directory and not modify the paths in @font-face urls.

52 Answers

✔️Accepted Answer

same here. this should be reopened.

Other Answers:

We have the exact same issue. The problem is that when you build the app with multiple languages as AOT, the paths to the fonts are incorrect. Angular references the font files like so:

Which results in a 404. The correct path should be:

That happens when we define a @font-face in a css file in: src/assets/styles like this:

@font-face {
  font-family: 'rawline';
  src: url('../fonts/rawline-100.woff') format('woff');
  src: url('../fonts/rawline-100.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;

If we refer to them like this instead:

@font-face {
  font-family: 'rawline';
  src: url('/assets/fonts/rawline-100.woff') format('woff');
  src: url('/assets/fonts/rawline-100.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;

The path it tries to load them from is:

This issue should either be reopened or clarified how to properly include local fonts.

@filipesilva The font we're using are used in every component, and that's why I really don't want to use your provided solution, as this seems to add quite a lot of duplicates.
I've read your comment on this issue #3143 (comment)

But I don't understand why it's expected behavior. How are you expected to import a local font then?

I had the same issue, but can fix it by using absolute path instead of relative one for fonts. Like this:

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	src: local('Roboto'), local('Roboto-Regular'),
		url('/assets/fonts/roboto-v18-latin-ext_latin-regular.woff2') format('woff2'),
		url('/assets/fonts/roboto-v18-latin-ext_latin-regular.woff') format('woff');

It works for dev and production build now.
I had '../assets/fonts/...' before and fonts were copied to the root when I use ng build --prod.

Why is this issue closed and ignored? Please kindly fix this. It is too messy of a solution right now.

@filipesilva Is there any solution or any flag which can be use while building so that fonts are not added in root directory ?
ng build --prod --something

More Issues: