Angular 11 Inlining of fonts failed

Question

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
}

Is there any solution on that? I am also facing the same issue. — , Mar 19 '21 at 06:39

Botirkhuja · Accepted Answer · 2021-04-06T16:59:25.380

21

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
     },
     ...
},

edited Apr 06 '21 at 16:59

answered Apr 06 '21 at 16:45

Botirkhuja

226
2
6

score 11 · Answer 2 · answered Aug 10 '21 at 10:10

11

According to https://github.com/angular/angular-cli/pull/19848

setting an environment HTTPS_PROXY variables does the job. It works for me behind the corporate proxy (don't forget http://):

SET HTTPS_PROXY=http://<server-name>:<server-port>
ng build

Environment: Windows 10, nodejs v14.17.4, angular 12.2.0

answered Aug 10 '21 at 10:10

30thh

10,861
6
32
42

do you set them for npm, or vs code, or ng – Tlotli Otlotleng Jan 04 '22 at 09:05
I set the environment variable HTTPS_PROXY globally using Windows 10 Control Panel. – 30thh Jan 04 '22 at 09:35

score 2 · Answer 3 · answered Jul 19 '22 at 08:44

i got same error :

resolved issue after making below changes in index.html file

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

score 1 · Answer 4 · answered Sep 03 '21 at 08:25

I had the same issue and the suggestions didn't work (except the proxy). So i downloaded css files from google server and binded via angular.json to the sources

"styles": [
    "src/styles.scss",
    "src/assets/fonts/roboto.scss",
    "src/assets/fonts/material-icons.scss"
]

score 1 · Answer 5 · answered Oct 18 '21 at 20:14

I had the same problem. Tried change optimization but did not helped.

Finally I called 'npm audit fix --force' inside my terminal and that solved my problem.

--force parameter is quite bruteforce here but if you are confident in that command, nothing bad should happened.

score 0 · Answer 6 · answered Jan 18 '22 at 14:34

0

In my case it was a problem with my VPN service.

answered Jan 18 '22 at 14:34

Henrique Erzinger

1,077
8
17

If you could give more context that could be helpful for those of us in organizations behind VPN's. – Travis Peterson Sep 22 '22 at 14:07
I really wish I could. It was a personal VPN (express VPN), so I just turned it off, and that solved the issue. – Henrique Erzinger Sep 22 '22 at 14:56

Sushant Yadav · Answer 7 · 2022-09-06T07:44:16.527

0

The best and simplest solution to this problem without making any change to angular.json. Simply Save the library Provide a name of your choice and map it to your index.html file as shown below. It does not required any proxy settings or any changes in angular.json or any change in production property.

    <link rel="stylesheet" type="text/css" href="./assets/css/materialIcon.css" />

edited Sep 06 '22 at 07:44

answered Sep 06 '22 at 06:06

Sushant Yadav

1
3

score 0 · Answer 8 · answered Sep 27 '22 at 10:32

0

In my case, the error was caused by the node version 18.x. Reverted back to 16.x LTS and it worked.

answered Sep 27 '22 at 10:32

ctudorache87

1

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 06 '22 at 10:47

score 0 · Answer 9 · answered Oct 11 '22 at 11:06

0

Kindly refer this link.Here instead of referencing the google api link in index.html file, I imported it in style.css file as shown in the given article and it worked for me.

answered Oct 11 '22 at 11:06

Saher Basharti

13
1
1
3

score -1 · Answer 10 · answered Dec 21 '21 at 02:50

It's just a style sheet, feel free to remove it from "index.html" (or any pages that links to it):

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

Or you can access the href link to get its content and make that as a new css or copy into the existing ones.

score -1 · Answer 11 · answered Sep 19 '22 at 12:42

-1

In my case I just deleted node module folder of my project and again install node module cmd : npm i

answered Sep 19 '22 at 12:42

Rashmi Chaudhary

1

Angular 11 Inlining of fonts failed

11 Answers11