无法在Gatsby SCSS中导入Google Fonts。

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. 谢谢大家 **

我是GatsbyJS新手，我想修改TaniaRascia的静态博客模板，系统运行正常。但是我的SCSS文件中无法导入google字体。我在她的网站上也看到这个错误。有什么解决办法吗？

代码:

/*! 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';

控制台的错误。

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.

而不是从url导入css，似乎浏览器从我的本地目录读取它作为一个链接。

我已经尝试了互联网上的解决方案，如.NET、.NET、.NET等。

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

其中2个产生同样的错误 "拒绝从......应用样式"。

有什么解决办法吗？谅谅

Answer 1

你可以尝试使用这个元。

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

要么用... react-helmet 或通过 html.js 盖茨比模板。关于如何定制html.js的说明在这里。

Answer 2

那么 gatsby-plugin-prefetch-google-fonts插件。? 我在我的scss文件中使用了这个。

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

在gatsby-config里面。

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