WARNING in Invalid font values at 15949:4. Ignoring: Angular4 prod build

Question

Angular application style.css have imported Roboto font css

@import url('https://fonts.googleapis.com/css?family=Roboto:100,200,300,700');

This is working fine in development build but for ng build --prod,

It gives an error and font not loading on browser:

WARNING in Invalid font values at 15949:4.

Nodejs: 6.11.4
Npm: 3.10.10
@angular/cli: 1.6.8
 "@angular/animations": "^4.3.0",
    "@angular/cdk": "2.0.0-beta.12",
    "@angular/common": "^4.3.0",
    "@angular/compiler": "^4.3.0",
    "@angular/core": "^4.4.6",
    "@angular/forms": "^4.3.0",
    "@angular/http": "^4.3.0",
    "@angular/material": "2.0.0-beta.12",
    "@angular/platform-browser": "^4.3.0",
    "@angular/platform-browser-dynamic": "^4.3.0",

Answer 1

Similar issue happened to one of my project about Material design icons font.

Here is what I did to solve the similar issue I was facing.

1. Added --verbose parameter while building angular package.

   ng build --prod --verbose

2. In the details that appeared after executing above command gave me following details :

   Child mini-css-extract-plugin node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!node_modules/postcss-loader/lib/index.js??extracted!src/styles.css: Entrypoint mini-css-extract-plugin = * chunk {0} * (mini-css-extract-plugin) 10.8 KiB [entry] [rendered]

   WARNING in Invalid font values at 1439:706. Ignoring.

3. Above details specified a filename src/styles.css which I have modified during development. So I commented all the codes in that file and run the build command again. And IT WORKED!!!!.

4. Now that I know the problem is somewhere in styles.css, so I started moving few lines of code from inside comments to outside of it, then run the command again and see if warning appears.

   After repeating these 2 steps for more than 20 times, the warning WARNING in Invalid font values appeared. Thats how I came to know that following code was causing the issue

   .mdi:before, .mdi-set { transition: all 0.2s; }

   So I removed above code and Uncommented all the rest of the code in the same file styles.css. Now that warning WARNING in Invalid font values does not appear and angular builds the package perfectly.

Answer 2

I wasn't able to determine which file had the problem from the output, even with the verbose setting. It listed all of the CSS & SCSS files included in the project together, then all of the warnings at the end. There was nothing I could see that associated specific warnings to specific files.

What I ended up doing was to remove all of the entries from the "styles" property for the "build" action in angular.json. I then added them back one at a time and rebuild the app with ng build --prod. Once the warnings appeared, then I knew it was the last file I added back that had the problem. Then I looked in that file for the property from the warning message (it was background for me, but would be font in the OP's case), until I found one that had an invalid value, and changed it to a valid value.