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

[gitdisrupt]

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 

Versions.

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.

[filipesilva]

There are two pipelines happening:

• anything in the assets array is copied wholesale, no questions asked.
• assets referenced in CSS are processed and fingerprinted, outputted to base directory.

So in your case you don't need to put those fonts in assets. Put them anywhere and the build system will recognize them.

[TimoKorinth]

Thank you @filipesilva for the clarification but I wonder what the preferred way would be?! Should I put my fonts in another folder (like 'resources') which will not be copied by default or should I put my files in the assets folder and reference them in scss with '/assets/...' instead of '../assets/...'?

[filipesilva]

Personally, I try to put images/fonts next to the components that use them and reference them from css. But if there's an image I need to load from html I put it in assets.

[ahirhasmukh]

@filipesilva I have some issue. I have put font directory in under src directory but it is doesn't resolved

[treolandix]

Same issue occurs. Any solution yet?

[GeorgeKnap]

same here. this should be reopened.

[Garima]

yes this should be opened ,it clutters the root directory

[LaughingbirdSoftware]

Agree. I have a lot of embedded fonts and 3 versions of each, so the root directory is a mess. Please re-open the issue.

[ziemerz]

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:

http://127.0.0.1/enrawline-100.woff

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

http://127.0.0.1/en/rawline-100.woff

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:

http://127.0.0.1:8081/en/en/assets/fonts/rawline-200.woff2

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?

[axmad22]

I am using SCSS and got it to work by placing 2 folders in the src directory one is a theme folder with my styles and a fonts folder with my fonts, then I added a styles.scss in the src directory and loaded in all my styles and for my @font-face I created a variable that point to my fonts that gets prepossessed at build time thus I get my fonts in the root dist directory and not duplicate in assets, also it works in dev time with ng serve.

here is my code in the styles.scss:

$droid-font-path: "./fonts/droidnaskh/DroidNaskh-Regular.woff";
@import "styles/fonts.scss";

and in my _fonts.scss

@font-face {
  font-family: 'Droid Arabic Naskh';
  src: local('Droid Arabic Naskh'), url($droid-font-path) format('woff');
  font-style: normal;
  font-weight: 400;
}

[walhow]

Is there a way to tell angular where to look up the text/html files (like favicon.ico and staticRoboto...eot)? I'd like to not have them in root (of my Java project I am deploying Angular in). All of my Angular /dist contents is currently being built into my-java-proj/static. This works for loading all the .js files (like inline.bundle.js).

I'd like to be able to tell angular to look inside of my-java-proj/static for these files. I'm currently getting 404s. The site still loads and works, but I'd like to be able to clean up these 404s.

[attrox]

My problem is the URL to the font is rewritten incorrectly when there's a hashtag involves in the URL.
url('./assets/fonts/ProximaNova/Mark Simonson - Proxima Nova Alt Regular-webfont.eot?#iefix') becomes
url("Mark Simonson - Proxima Nova Alt Regular-webfont.e802340fb269d9d36021.eot”?#iefix).

The url becomes invalid.

[narendrasinghrathore]

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