Import Google Fonts with scss: MIME-Type Conflict

Question

I'm building an Angular app and I am using scss for styling and want to import google fonts.

I have a fonts.scss where everything related to fonts is saved. I import Google Fonts like this:

fonts.scss

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;500;700&display=swap');

Because there are different files, I need to import to different components, I have a file called imports.scss that contains the fonts and more like color variables.

imports.scss

@import 'src/styles/imports/fonts';
@import 'src/styles/imports/colors';

Now, my ng components can use the fonts and variables with an import:

@import 'src/styles/imports';

Even though the variables and fonts are working, I am getting the following error in Google Chrome:

platform-browser.js:789 GET https://fonts.googleapis.com/css2?family=Poppins:wght@300;400[_ngcontent-dsi-c57];700&display=swap net::ERR_ABORTED 400

and in Firefox I am getting this error:

The resource from "(link to google fonts)" was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).

Is there a way to solve this problem?

Attending

Maybe you can find some hints here: #14677113 – Oberland

Answer 1

Google API font endpoints always return a stylesheet if there is no error, else they return a html error page.

This got me puzzled because I had a similar issue in which this html code (quite similar to your scss code)

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Source+Code"
/>

only logged this in the console

The resource from “https://fonts.googleapis.com/css?family=Source+Code” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

The hard part to understand was that my browser requested a stylesheet (Content-Type: text/css) but Google responded with an html error page (Content-Type: text/html). Also, Google servers are configured with a nosniff header that basically doesn't even send the error page back if there is a mismatch between the requested content type and the to-be-responded response type.

Sadly it was this error page that gave away the source of the bug (I opened the stylesheet URL in another window):

I did a typo, it's source code pro, not source code, so this

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Source+Code+Pro"
/>

worked as expected. I'm suspecting something similar on your end.

Spahi