Angular 11 Inlining of fonts failed

I

12

29

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
}

Idealistic answered 2/3, 2021 at 2:6 Comment(3)

Is there any solution on that? I am also facing the same issue. – Rheotropism 19/3, 2021 at 6:39

How did you resolve it ? I'm also facing similar issue. – Lectionary 25/3, 2021 at 8:25

Facing the same issue. – Oeflein 26/3, 2021 at 14:51

A

37

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

Aleksandrovsk answered 6/4, 2021 at 16:45 Comment(0)

M

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

Mendiola answered 10/8, 2021 at 10:10 Comment(2)

do you set them for npm, or vs code, or ng – Holocaine 4/1, 2022 at 9:5

I set the environment variable HTTPS_PROXY globally using Windows 10 Control Panel. – Mendiola 4/1, 2022 at 9:35

T

3

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" />

Trotline answered 19/7, 2022 at 8:44 Comment(0)

A

3

Disconnecting from corporate VPN solved this issue for me.

Angular 15

Error : ✖ Index html generation failed. Inlining of fonts failed. An error has occurred while retrieving https://fonts.googleapis.com/css2?family=Inter&display=swap over the internet. connect ETIMEDOUT 172.208.21.111:443

Arraignment answered 4/9, 2023 at 10:53 Comment(1)

Which is probably a violation of your corporate policy. – Doty 4/6 at 17:1

B

1

I had the same issue and the suggestions didn't work (except the proxy), so I downloaded the CSS files from Google server and bound via angular.json to the sources:

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

Brookebrooker answered 3/9, 2021 at 8:25 Comment(0)

A

1

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.

Abiogenesis answered 18/10, 2021 at 20:14 Comment(0)

D

0

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

Dalesman answered 18/1, 2022 at 14:34 Comment(2)

If you could give more context that could be helpful for those of us in organizations behind VPN's. – Guajardo 22/9, 2022 at 14:7

I really wish I could. It was a personal VPN (express VPN), so I just turned it off, and that solved the issue. – Dalesman 22/9, 2022 at 14:56

F

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" />

Fairminded answered 6/9, 2022 at 6:6 Comment(0)

H

0

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

Hydrothorax answered 27/9, 2022 at 10:32 Comment(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. – Krissy 6/10, 2022 at 10:47

P

0

Kindly refer to this Angular tutorial. 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.

Periodic answered 11/10, 2022 at 11:6 Comment(0)

P

-1

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.

Podophyllin answered 21/12, 2021 at 2:50 Comment(0)

J

-1

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

Jaret answered 19/9, 2022 at 12:42 Comment(0)

Recommended topics

Hot tags