title: Import Google Fonts with scss: MIME-Type Conflict
body: <p>I'm building an Angular app and I am using scss for styling and want to import google fonts.</p>
  
  <p>I have a <code>fonts.scss</code> where everything related to fonts is saved. I import Google Fonts like this:</p>
  
  <p><strong>fonts.scss</strong></p>
  
  <pre><code> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&amp;display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;500;700&amp;display=swap');
  </code></pre>
  
  <p>Because there are different files, I need to import to different components, I have a file called <code>imports.scss</code> that contains the fonts and more like color variables.</p>
  
  <p><strong>imports.scss</strong></p>
  
  <pre><code>@import 'src/styles/imports/fonts';
  @import 'src/styles/imports/colors';
  </code></pre>
  
  <p>Now, my <strong>ng components</strong> can use the fonts and variables with an import:</p>
  
  <pre><code>@import 'src/styles/imports';
  </code></pre>
  
  <p>Even though the variables and fonts are working, I am getting the following error in Google Chrome:</p>
  
  <pre><code>platform-browser.js:789 GET https://fonts.googleapis.com/css2?family=Poppins:wght@300;400[_ngcontent-dsi-c57];700&amp;display=swap net::ERR_ABORTED 400
  </code></pre>
  
  <p>and in <strong>Firefox</strong> I am getting this error:</p>
  
  <pre><code>The resource from "(link to google fonts)" was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
  </code></pre>
  
  <p>Is there a way to solve this problem?</p>