在Gatsby和Styled-Components中使用Google Web字体

Question

我使用的是样式化组件中的createGlobalStyle，就全局样式而言，它们的工作方式是应该的。但是，我不能使用/应用Google字体。

代码如下：

import { createGlobalStyle } from "styled-components"

const GlobalStyle = createGlobalStyle`

  @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap"); 
  
  body {
    font-family: "Manrope", sans-serif;
  }

`

我也试过了：

*{
  font-family: "Manrope", sans-serif;
}

Answer 1

为什么不使用gatsby-plugin-google-fonts

{
  resolve: `gatsby-plugin-google-fonts`,
  options: {
    fonts: [
      `Manrope: 400, 700`,
    ],
    display: `swap`,
  },
},

您的字体将被加载，您将能够：

import { createGlobalStyle } from "styled-components"

const GlobalStyle = createGlobalStyle` 
  body {
    font-family: "Manrope", sans-serif;
  }
`