CODEWITHSUNDEEP
angulargoogle-fonts
Mauro
Mauro

Reputation: 4214

Why is Angular breaking my Google Fonts SCSS import?

I've got this line on my global SCSS:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;700&family=Roboto&display=swap');

But for some reason, the URL gets somehow intercepted by Angular and the request being made by the browser is altered: enter image description here

Obviously, Google Fonts ends up returning a 400 HTTP Status.

Upvotes: 0

Views: 3835

Answers (2)

Poornima
Poornima

Reputation: 11

I was facing the same issue while making the angular build. Adding below to the angular.json file worked for me.

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

Upvotes: 1

Fede
Fede

Reputation: 36

I have same trouble and finally I decided to desist of the import inside scss and added in index.html

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;display=swap" rel="stylesheet">

Upvotes: 1

Related Questions