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

【问题标题】：Using Google Web Fonts With Gatsby and Styled-Components在 Gatsby 和 Styled-Components 中使用 Google Web 字体
【发布时间】：2021-02-26 06:41:49
【问题描述】：

我正在使用 styled-components 中的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;
}

【问题讨论】：

标签： javascript reactjs gatsby styled-components

【解决方案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;
  }
`

【讨论】：