Angular-cli: 1.7.0 fonts are corrupted after prod build

[MateEke]

Versions

Angular CLI: 1.7.0
Node: 8.9.1
OS: win32 x64
Angular: 5.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.0
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.7.1
webpack: 3.11.0

Repro steps

• Install @angular/cli: 1.7.0
• import fontawesome in .angular-cli.json or in styles.scss
• run ng build --prod

Observed behavior

Failed to decode downloaded font: http://*/fontawesome-webfont.af7ae505a9eed503f8b8.woff2?v=4.7.0
OTS parsing error: invalid version tag

Desired behavior

FontAwesome icons works fine

Mention any other details that might be useful (optional)

With cli 1.6.8 everything is OK

[rajweb]

same issue on build and on ng serve got error
TypeError: undefined is not a function at Array.map () at webpackAsyncContext

[filipesilva]

I tried reproducing on Windows with 1.7.0 and could not. This is what I did:

ng new latest-project
cd latest-project
npm run build # builds with prod successfully
npm install --save font-awesome
# add "../node_modules/font-awesome/css/font-awesome.css" to `.angular-cli.json` 
# as described in https://github.com/angular/angular-cli/wiki/stories-include-font-awesome
npm run build # builds successfully 
npm start -- --prod # serve with prod, no error on browser

[MateEke]

ng serve is fine for me, the error occurs when I run ng build --prod and use nginx or apache to serve the content.

[clydin]

Tried a production build ng build --prod with live-server and could also not reproduce the issue.

[MattMorrisDev]

I didn't try this guy's build, but I see these same errors using ng serve using the same setup described here.

The issues started in 1.7.0-beta3 for me. Please let me know if you guys need any more info - this one is blocking me from upgrading (along with #9651) so I'd be glad to provide whatever info would help.

[clydin]

@MattMorrisDev That was caused by a bug in the betas that was fixed for the final release via https://github.com/angular/angular-cli/pull/9564 . The issue occurring here appears to be due to an interaction with nginx/apache.

[MattMorrisDev]

Sorry, you're right. Got my versions/bugs mixed up.

[clydin]

This may be due to a caching issue. An old corrupt version of the file could either be cached local in the browser or in some intermediate cache.

[MateEke]

Not related to caching, I always build a new docker container on deploy, and when I make it with 1.6.8 everything is fine, with 1.7.0 always messed up. On my work PC caching in disabled in the browser.

[russ-blaisdell]

Seeing the same, moving back to 1.6.8. I also build a new container each time on ubuntu. So not related to caching or windows or mac.
Builiding with ng build --prod --aot false perhaps that makes a difference.

[clydin]

As we are unable to reproduce this, can you possibly put together a minimal reproduction that demonstrates the problem.

Also, does this occur with ng serve in production mode? Something else to try would be to do a production build and then use live-server (or similar) to test locally and reduce the complexity of the test case.

[andjiev]

@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,500,700"); in my theme css
seems to not load my fonts. I imported them manually in my index.html and the problem is gone.
This happens when using ng build --prod.
ng serve works fine.

[clydin]

@andjiev That's not related to this issue as the fonts in that case would not be processed by the CLI as it is an absolute URL. This issue may be more relevant: #9267. Also see my comment from that issue on why loading fonts in that manner is generally not a good idea: https://github.com/angular/angular-cli/issues/9267#issuecomment-363194043

[russ-blaisdell]

Items that "might" help on repro. I am sorry I cannot easily break down the app, which is both large and proprietary.
A) This is occurring, in my example. using p-treetable (https://www.primefaces.org/primeng/#/treetable)
package.json:

{
  "name": "xxxxxi",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.3",
    "@angular/cdk": "^5.0.0-rc.1",
    "@angular/common": "^5.0.3",
    "@angular/compiler": "^5.0.3",
    "@angular/compiler-cli": "^5.0.3",
    "@angular/core": "^5.0.3",
    "@angular/forms": "^5.0.3",
    "@angular/http": "^5.0.3",
    "@angular/material": "^5.0.0-rc.1",
    "@angular/platform-browser": "^5.0.3",
    "@angular/platform-browser-dynamic": "^5.0.3",
    "@angular/platform-server": "^5.0.3",
    "@angular/router": "^5.0.3",
    "@swimlane/ngx-datatable": "=11.1.3",
    "@types/file-saver": "0.0.1",
    "angular-font-awesome": "^3.0.3",
    "bootstrap": "^3.3.7",
    "bootstrap-slider": "^9.8.1",
    "chart.js": "^2.6.0",
    "codelyzer": "^4.0.1",
    "core-js": "^2.4.1",
    "d3-ng2-service": "^1.19.0",
    "dom-walk": "^0.1.1",
    "eslint": "^4.4.1",
    "file-saver": "^1.3.3",
    "font-awesome": "^4.7.0",
    "global": "^4.3.2",
    "hammerjs": "^2.0.8",
    "jquery": "^3.2.1",
    "jstz": "^1.0.10",
    "material-design-lite": "^1.3.0",
    "min-document": "^2.19.0",
    "moment": "^2.18.1",
    "moment-timezone": "^0.5.13",
    "ng2-charts": "^1.6.0",
    "ng2-select-compat": "1.3.1",
    "ng2-slideable-directive": "^1.0.13",
    "ng2-slider-component": "^1.0.9",
    "ngx-bootstrap": "^2.0.2",
    "primeng": "^4.3.0",
    "rxjs": "^5.5.2",
    "tether": "^1.4.0",
    "topojson": "^3.0.2",
    "typescript": "^2.4.2",
    "typings": "^2.1.1",
    "xlsx": "^0.11.2",
    "zone.js": "^0.8.14",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0"
  },
  "devDependencies": {
    "@angular/cli": "=1.6.8",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "@types/topojson": "^3.0.2",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3",
    "world-atlas": "^1.1.4"
  }
}

Build is ng build --prod --aot false
angular-cli.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "dash-ui"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/bootstrap/dist/css/bootstrap-theme.min.css",
        "../node_modules/@swimlane/ngx-datatable/release/index.css",
        "../node_modules/@swimlane/ngx-datatable/release/themes/material.css",
        "../node_modules/@swimlane/ngx-datatable/release/assets/icons.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/primeng/resources/themes/omega/theme.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/tether/dist/js/tether.min.js",
        "../node_modules/moment/min/moment.min.js",
        "../node_modules/moment-timezone/moment-timezone.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

[russ-blaisdell]

Note on above when failing the angular cli version in package.json was "@angular/cli": "^1.6.4",. Build today, 2-20-2018 which being a fresh npm install/ng build had pulled the latest 1.7.0

[255kb]

Same problem for me but with version 1.7.1, everything is fine with version 1.7.0.

Versions

Angular CLI: 1.7.1
Node: 8.9.4
OS: win32 x64
Angular: 5.2.6
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router

@angular/cli: 1.7.1
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.6.2
webpack: 3.11.0

[TimoFrye]

Same problem with 1.7.1 and latest semantic-ui

Failed to decode downloaded font: http://localhost:4200/icons.674f50d287a8c48dc19b.eot?#iefix)%20format(%27embedded-opentype%27),url(themes/default/assets/fonts/icons.woff2)%20format(%27woff2%27),url(themes/default/assets/fonts/icons.woff)%20format(%27woff%27),url(themes/default/assets/fonts/icons.ttf)%20format(%27truetype%27),url(themes/default/assets/fonts/icons.svg#icons)%20format(%27svg%27
OTS parsing error: invalid version tag

1.7.0 works just fine when running ng serve --aot

[fergalmoran]

Can confirm on 1.7.* when "ng build --prod" is served through nginx. As above, clean docker image each time so definitely no caching issue. Reverting to 1.6.8 resolves.

[arrow-dev]

Hmm I'm having a strange issue with fonts too since upgrading to 1.7.2 from 1.6.8, when I run --prod build my font imports seem to just disappear, I have moved them to index.html to get them working again, the strange thing is that it's only happening in one branch and I can't see any differences of note between the branches that would cause this, I haven't looked into it too much yet but it occurs running ng serve --prod as well as ng build --prod then using http-server to serve.

[anton-gorbikov]

I'm experiencing similar issue after migrating from 1.6.8 to 1.7.3. Steps to reproduce:

ng new latest-project
cd latest-project

Download any font as a sample and put it into the project directory. I'll use Font Awesome as example. Then manually add @font-face definition to styles.css:

@font-face {
    font-family: "Font Awesome";
    src: url("./fa-solid-900.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

body {
    font: "Font Awesome";
}

Then try to build the project:

ng build --prod
Date: 2018-03-15T08:46:41.758Z
Hash: ed0a71e03117b9c23e5c
Time: 4473ms
chunk {0} polyfills.bf95165a1d5098766b92.bundle.js (polyfills) 59.4 kB [initial] [rendered]
chunk {1} main.16bd2dbbc06007f15324.bundle.js (main) 154 kB [initial] [rendered]
chunk {2} styles.d9d6e24bded53673137d.bundle.css (styles) 137 bytes [initial] [rendered]
chunk {3} inline.318b50c57b4eba3d437b.bundle.js (inline) 796 bytes [entry] [rendered]

WARNING in Invalid font values at 11:1. Ignoring.

Fonts will not work, because they are removed from the output bundle. If I just downgrade @angular/cli to 1.6.8 in the same project without applying any changes to project and build it in the prod mode it's working fine.

[asfo]

I'm facing this issue too.

But is weird because in my case the icons shows partially, just a couple of them are not being rendered and the worst part is that my images are not being rendered in any way and the console doesn't show any issue related with the images.

Also, when I run ng build --prod I lose my images and the FontAwesome.

[bluecaret]

@anton-gorbikov Did you ever find a solution to this? I'm getting the "Invalid font values" warning as well, except I'm not even sure what fonts it is affecting, I'm assuming font awesome.

[anton-gorbikov]

@bluecaret No, I have no solution/workaround for this issue. In my current project it affects all fonts, not just Font Awesome. So I just rolled back ng-cli to version 1.6.8

[fergalmoran]

Just tried with 1.7.4 (released 2 days ago) - issue is still present.

[bart-kors]

I had this problem in combination with nginx. When I added the following line to server part in nginx configuartion file it was resolved:
location ~* \.(eot|otf|ttf|woff|woff2)$ { root /usr/share/nginx/html; }

[ImranAhmed]

I am seeing this too.

Angular CLI: 1.7.4
Node: 8.9.1
OS: win32 x64
Angular: 5.2.10

Running: ng build --prod --output-hashing=all

WARNING in Invalid font values at 1405:2. Ignoring.

[seekaprice]

I can confirm this too.
Angular CLI: 1.7.4
Node: 8.4.0
OS: windows 10 x64
Angular: 5.2.10
Server: IIS 8.5
Running: ng build --prod
everything build fine, so errors or warnings
Publish the build to my server and fonts are all messed up.

If I build with angular/cli 1.6.8, everything is fine.
if I run ng server with angular/[email protected] everything is fine too.

Currently I have to use angular/[email protected] to build and publish. Hopefully update to angular/cli will fix the issue

[tmofardin]

I managed to get it working by downloading fonts locally instead of referencing remote web location. The warning during build still appears, but the fonts are working in 90% of application parts.

[fergalmoran]

@bart-kors suggestion above works for those using nginx.

[seekaprice]

referencing locally works for me too.
I removed remote references and added to my .angular-cli.json file in the styles section
"styles": [
"../node_modules/material-design-icons/iconfont/material-icons.css",
"../node_modules/font-awesome/css/font-awesome.css",
"app/styles.scss"
],
running: ng serve
no issues
and: ng build --prod
no issues on server too

[pderks]

@anton-gorbikov I see the same behavior that you are when I import google fonts because the fonts are defined using font-face. Simply making the changes below fixed the issue for me.
Before:

body {
    font: 14px 'Open Sans';
}

After:

body {
    font-size: 14px;
    font-family: 'Open Sans';
}

[ImranAhmed]

I've just updated my project to Angular v6 and CLI v6 and I am no longer seeing the font warning issue.

Angular CLI: 6.0.0
Node: 8.9.4
OS: win32 x64
Angular: 6.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, http, language-service, material, platform-browser
... platform-browser-dynamic, platform-server, router

[anton-gorbikov]

Today I've updated project to Angular and CLI to v6 and it didn't fix the issue. However changing font to font-size + font-family manually fixes the problem. Thanks a lot @pderks !

[ImranAhmed]

@anton-gorbikov , yes, you are right. I've just checked again and the issue is still there in angular v6. I must have ran it with the aot flag, thanks for the clarification.

[MateEke]

The issue is still there in v6.

@bart-kors This solution works for me, thank you!

[lucax88x]

I'm also using nginx, but the @bart-kors solution didn't fix, just because the problem is that I don't even have the @import of the font from the CDN in the prod build, and I don't get any warning, it just removes it.

btw: i'm using SCSS

[Spri85]

I have the same problem with font-awesome (style - scss, Angular-cli - 1.7.4, nginx). Which is the best way to solve this issue?

[tmofardin]

@Spri85 What kind of problems do you have? Have you tried downloading them locally?

[Spri85]

Hello,

Yes, I tried download locally, but I got error that can’t find file .woff2.

The error was only when I tried run build prod in nginx.

But when I changed path

From: "../node_modules/font-awesome/css/font-awesome.css"

To: "../node_modules/font-awesome/scss/font-awesome.scss"

It became to normal and works fine.

Thank you for help

Best regards,

Paranin Viktor

From: Toni Mofardin [mailto:[email protected]]
Sent: Wednesday, May 23, 2018 10:44 AM
To: angular/angular-cli [e-mail]
Cc: Viktor [e-mail]; Comment [e-mail]
Subject: Re: [angular/angular-cli] 1.7.0 fonts are corrupted after prod build (#9648)

What kind of problems do you have? Have you tried downloading them locally?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub https://github.com/angular/angular-cli/issues/9648#issuecomment-391252117 , or mute the thread https://github.com/notifications/unsubscribe-auth/ALwLX-63tMlhHTEyUirAA85McI377yz4ks5t1RNDgaJpZM4SIIWb .

[ImranAhmed]

In an Angular 6 project you can get past this if you set optimization to false in angular.json file.

The problem is when it spits out the warning its actually very difficult to trace it back to the exact css style that it is complaining about because the output files have been optimized.

[Ant59]

If anyone is having this issue when using a custom font with Material, the fix is to specify a full CSS font definition string as font-family, including a web-safe font.

$project-typography: mat-typography-config(
-  $font-family:   'Johnston ITC',
+  $font-family:   'Johnston ITC, sans-serif',
   $headline:      mat-typography-level(48px, 48px, 500),
   $title:         mat-typography-level(40px, 40px, 500),
   $subheading-1:  mat-typography-level(32px, 34px, 500),

This fixed the warnings for me.

[ghost]

assets/fonts/iconfont/material-icons.css

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

angular.json:

                        "styles": [
...
                            "src/assets/fonts/iconfont/material-icons.css"
                        ],

css:

                        .mat-selected::before {
                            content: "check";
                            font: normal normal normal 14px/1 "Material Icons";
                        }

The builder removes the font-familiy: 'Material Icons' tag from the ::before definition and reports the warnings during the build process

"@angular/cli": "^6.0.1",

[ghost]

There is definitely a bug in the optimiser.
"optimization": false fixes the issue but it's not the solution.
I had two definitions for:

.mat-selected::before {

in the same file so i joined them and changed the css a bit and then it worked:

.mat-option.mat-selected::before {
    color: $primary-one !important;
    font-family: "Material Icons";
    content: "check";
    display: inline-block;
    font: normal normal normal 14px/1 "Material Icons";

[escline]

I noticed a few others in this thread were also using nginx and having this problem, so I ran a few tests. We were getting an 'OTS parsing error: invalid version tag' console error when loading the fonts.

• I had noticed that after upgrading to Angular CLI 1.7.4, that the app was requesting our font-awesome fonts with ?v=4.7.0 appended to the request. CLI 1.6.8 was not.
• Copy/paste the full font request was actually returning the index.html page.
• Looking in our nginx conf, we have the following, which allows a page refresh to work with the Angular router, and not going to a 404 page. (www.example.com/profile would load www.example.com/index.html and then the Angular app would load profile route)
  ```
  location / {
  try_files $uri$args $uri$args/ /index.html
  }

* Removing this nginx conf section allowed the font-awesome fonts to work again, but page/app reloading no longer worked if you were sitting on a route other than the home/default.
* I then added the following right above the `location /` section to catch the font requests and do nothing.

location ~* .(eot|otf|ttf|woff|woff2)$ { }
```
Our fonts are now working with CLI 1.7.4 and page refreshes continue to work.

It may not be the fix for everyone, but I believe this nginx conf or a similar conf section is on a lot of Angular/nginx articles/tutorials, so hopefully this will help others having this issue.

[jurienhamaker]

Experiencing the same problem with @angular/[email protected]

@escline's fix did not work for us.

Here is our full nginx configuration:

server {  
    listen 80;
    index index.html;

    error_log  /var/log/error.log;
    access_log /var/log/access.log;
    root /opt/app/dist;

    location ~* \.(eot|otf|ttf|woff|woff2)$ { }
    location / {
        try_files $uri$args $uri$args/ $uri/ /index.html =404;
    }
}

If I remove the version tag from the url, the fonts are served correctly.

[cmckni3]

I found that font awesome contains a query string parameter for the version (old, defunct cache busting technique). I added $uri $uri/ to my nginx location block.

[dsalla]

I found a solution: Remove the url version there in font-awesome.css in node_modules. Example:

Before:
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');

After:
src: url('../fonts/fontawesome-webfont.eot');

Up to v1.6 of the angular-cli it removed this during compilation. From v1.7 keeps what is in css.

I compared the styles.css of a dist v1.6 and another v6 and that was the difference I found.

I'm using angular v6.0.6 and angular-cli v6.0.8 and it works.

[adripanico]

I'm also having this issue.

@dsalla, this doesn't work for me since I'm not using fontawesome and the fonts I'm using have no version info in the url.

[adripanico]

Well, I finally solve it. In our case, there was a custom font with a space in its name. As soon as I removed the damn space, the warning and the problems were gone.

[bluecaret]

Thanks @adripanico ! That definitely helped me out! My font name has a space that has to be there (font awesome) but it did make me think to look to see if I'm manually adding the font anywhere which I was.

I had manually duplicated the font awesome styling to create a sass mixin and in there I had the following line:

font: normal normal 900 14px/1 'Font Awesome 5 Free';

I changed it to not use shorthand like this:

  font-style: normal;
  font-variant: normal;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  font-family: 'Font Awesome 5 Free';

And now it works!!

[ImranAhmed]

Removing the spaces from the font names fixed it for me too. However I then saw this:

WARNING in Invalid background value

I removed all the background css attributes from my project but still saw the error. I suspect it might be from a package that its pulling from node_modules.

Latest fix following resolving font issue.

Switch optimization back to true in angular.json and switch extractCss to false. This gets me past my background issue.

[AntonisFK]

Had this issue with angular material mixin @include angular-material-typography. @Ant59 solution did not fix my problem, setting optimization false did the trick.

[ccadieux]

We just ran into this issue. Updating to the latest build does not fix the issue. Turning off the build optimizer did not fix the issue. We had to change to the non-shorthand version.

The warning is very unfriendly as it has no reference to the file the issue came from.

This should be an error not a warning in a production build. It should fail a build not just ignore it.

[zartinn]

I have the same issues after renaming my font from "MyFont" to "My Font"
I am pretty sure it has something to do with the space in between!

After using the seperate styles "font-family", "font-size"... it works again. With the "font" shortcut property it fails.

[adripanico]

I have the same issues after renaming my font from "MyFont" to "My Font"
I am pretty sure it has something to do with the space in between!

After using the seperate styles "font-family", "font-size"... it works again. With the "font" shortcut property it fails.

Of course it has something to do with the space. Have you read anything in this thread?

[zartinn]

Why so rude? Here are several ideas and comments to this problem. I have not seen/read your comment on that.

[adripanico]

Why so rude? Here are several ideas and comments to this problem. I have not seen/read your comment on that.

https://github.com/angular/angular-cli/issues/9648#issuecomment-410951334

https://github.com/angular/angular-cli/issues/9648#issuecomment-411308175

[CRACKISH]

I have same warning.

I add my fonts in main styles.scss

and use this fonts in scss files

All work fine, but this warning infuriates me.

`
Angular CLI: 7.3.5
Node: 10.13.0
OS: win32 x64
Angular: 7.2.8
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.13.5
@angular-devkit/build-angular 0.13.5
@angular-devkit/build-optimizer 0.13.5
@angular-devkit/build-webpack 0.13.5
@angular-devkit/core 7.3.5
@angular-devkit/schematics 7.3.5
@angular/cdk 7.3.4
@angular/cli 7.3.5
@angular/material 7.3.4
@ngtools/webpack 7.3.5
@schematics/angular 7.3.5
@schematics/update 0.13.5
rxjs 6.4.0
typescript 3.2.4
webpack 4.29.0
`

[adripanico]

Just remove the spaces from the font's filename.

[alan-agius4]

Hi all,

There seems to be several issues being mentioned in the report, I will go though them a bit in detail here.

Filenames with spaces
A the moment there is a bug, which causes a build failure when a font filename has a space.

Font names with spaces
Some of the comments above report seeing this warning WARNING in Invalid font values at 3:4. Ignoring This is a bug in clean-css. (I’ll be opening an issue with them tomorrow and add a link below)

Both issues will be addressed in this PR https://github.com/angular/angular-cli/pull/13903

If you are experiencing any other issues, kindly file a new issue with a minimal reproduction.

[alan-agius4]

Clean-css issue https://github.com/jakubpawlowicz/clean-css/issues/1063

[malienist]

I was also getting the same error after using --prod flag. Removing the space in the font name in @font-face rectified the issue for me.

[qortex]

Found a workaround for the issue with space in font name:

as in CSS standard, enclose the font name in double quotes, and add a generic fallback. For me, it gives:

$regular-font: '"Open Sans", sans-serif';

and then I use this in font definition:

mat-typography-config( $font-family: $regular-font, /*...*/)

[angular-automatic-lock-bot[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._}