Cannot Import Google Fonts in Gatsby SCSS

Question

** EDIT **
Nah, the problem is the css2 api who use wght@500: so i must escape the @ and : with %40 and %3B and now its fixed. but someone told me its better to use gatsby plugin typeface, and it slightly improved my site performance. Thanks all
**

I'm new to GatsbyJS and I'm trying to modify TaniaRascia's static blog template, the system works fine. But I cannot import google fonts in my SCSS file. I see this error on her site too. Any solutions?

The Code :

/*! Primitive

by Tania Rascia */

@import url(https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&display=swap);

@import url(https://fonts.googleapis.com/css?family=Roboto+Mono);

// Configuration

@import 'base/variables';

@import 'base/mixins';

The Error in Console :

Refused to apply style from '``<SITE_URL>/url``(https://fonts.googleapis.com/css2?family=Inter:wght@500' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Instead of importing the css from url, it seems the browser read it as a link from my local directory.

I've tried solutions from the Internet such as :

 - #import 'https://....' < this one produces error when i ran gatsby build
 - @import url("https://...'
 - @import url('https://...'

And 2 of them produces same error "Refused to apply style from...."

Any solutions? Thanks

Does this help? https://stackoverflow.com/questions/48248832/stylesheet-not-loaded-because-of-mime-type — Robin Métral, May 31 '20 at 08:14

score 1 · Answer 1 · answered May 31 '20 at 09:16

1

Can you try using this meta:

<meta http-equiv="Content-Security-Policy" content="style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;">

Either using react-helmet or via the html.js Gatsby template. Instructions on how to customize html.js here

answered May 31 '20 at 09:16

B. Cole

124
8

1

thanks Cole. Someone recommends me to use typeface, so its fixed now. I'll try yours too and compare the performance, thanks a lot ! – Steven Lavinske Jun 01 '20 at 05:09

score 0 · Answer 2 · answered Jun 03 '20 at 18:01

What about the gatsby-plugin-prefetch-google-fonts plugin? I use that within my scss files.

body {
  font-family: "Raleway", sans-serif;
}

inside gatsby-config:

{
      resolve: `gatsby-plugin-prefetch-google-fonts`,
      options: {
        fonts: [
          {
            family: `Raleway`,
          },
        ],
      },
    },

Cannot Import Google Fonts in Gatsby SCSS

2 Answers2