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

【问题标题】：What is the syntax to add multiple fonts with Gatsby Plugin Google Fonts?使用 Gatsby Plugin Google Fonts 添加多种字体的语法是什么？
【发布时间】：2021-12-16 07:24:36
【问题描述】：

这适用于 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 并添加第二个字体数组，但都没有奏效。到目前为止，每个视频和文章都认为适合以一种字体作为演示。

感谢您的帮助。

【问题讨论】：

标签： syntax gatsby google-fonts

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

如果上面的 sn-p 不起作用（检查<header> 中生成的<link>），请尝试按照此GitHub thread 中的建议方法（在格式之前进行转换）：

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

【讨论】：

太棒了！你搞定了。干杯！