使用 Gatsby 插件 Google 字体添加多种字体的语法是什么？

Question

这适用于 Lobster Two 字体：

  {
  resolve: `gatsby-plugin-google-fonts`,
  options: {
    fonts: [
      `Lobster Two`,
      `source sans \pro:400, 400i`, // you can also specify font weights and styles
    ],

    
    display: "swap",
  }

我试过在字体数组中添加 Poppins 并添加第二个字体数组，但都没有用。到目前为止，每个视频和文章都适合停在一种字体上作为演示。

感谢您的帮助。

Answer 1

对于 gatsby-plugin-google-fonts，您需要添加每个特定类型，例如：

fonts: [
   `montserrat`, `montserrat\:700`, `montserrat\:900`, `open sans`
  ]

这是因为 Google Fonts API has been updated to v2.

我建议改用 gatsby-plugin-google-fonts-v2：

plugins: [
  {
    resolve: `gatsby-plugin-google-fonts-v2`,
    options: {
      fonts: [
        {
          family: 'Lobster Two',
        },
        {
          family: 'Source Sans Pro',
          weights: ['400, 400i']
        }
      ]
    }
  }
];

如果上面的代码片段不起作用（检查 <header> 中生成的 <link>），请尝试遵循此 GitHub thread 中建议的方法（在格式之前转译）：

  {
    resolve: `gatsby-plugin-google-fonts-v2`,
    options: {
      fonts: [
       {
         family: 'Lobster Two',
      },
      {
        family: 'Source Sans Pro:ital,wght@1,400;',
      },
     ]
   }
 }

使用 Gatsby 插件 Google 字体添加多种字体的语法是什么？

What is the syntax to add multiple fonts with Gatsby Plugin Google Fonts?

syntax

gatsby

google-fonts