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?
