Search code examples
angularangular11

Angular 11 Inlining of fonts failed

Trying to build angular11 app in a system behind proxy. When running "ng build --prod" I get this error:

Inlining of fonts failed. An error has occurred while retrieving https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap over the internet. getaddrinfo ENOTFOUND fonts.googleapis.com

Some posts said to disable it, directing to this angular doc URL for more info, but I can't get that to work. If I edit angular.json "optimization" parameter to below, I get a Schema validation failed...Data path .optimization should be boolean error:

"optimization": { 
  "scripts": true,
  "styles": {
    "minify": true,
    "inlineCritical": true
  },
  "fonts": false
}

If I follow this post (search for "AUTOMATIC FONT INLINING") and add below in package.json, it doesn't seem to have any effect:

"optimization": { 
  "scripts": true,
  "styles": false,
  "fonts": false
}
Solution

  • Following Angular's guidance on the URL you mentioned, I changed angular.json file only, slightly different way and it worked for me. Here is what I changed in angular.json file under production property.

    "production": {
    ...
    "optimization": {
        "scripts": true,
         "styles": true,
         "fonts": false
     },
     ...
},