无法在 Gatsby SCSS 中导入 Google 字体

Question

** 编辑 **
不，问题是使用 wght@500 的 css2 api： 所以我必须用 %40 和 %3B 转义 @ 和 : ，现在它已修复。 但有人告诉我最好使用 gatsby 插件字体，它稍微提高了我的网站性能。谢谢大家
**

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

代码：

/*! 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，而是将其作为本地目录的链接读取。

我尝试过来自 Internet 的解决方案，例如：

 - #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 Gatsby 模板。 Instructions on how to customize html.js here

Answer 2

gatsby-plugin-prefetch-google-fonts plugin 呢？我在我的 scss 文件中使用它。

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

在 gatsby-config 内部：

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