Why is Angular breaking my Google Fonts SCSS import?

Question

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:

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

Answer 1

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

Answer 2

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 }