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

gatsby-plugin-google-fonts 多字体配置方案 #

你只需要直接在现有fonts数组中追加字体条目即可，不需要新增第二个fonts数组，包含Poppins的完整配置示例如下：

{
  resolve: `gatsby-plugin-google-fonts`,
  options: {
    fonts: [
      `Lobster Two`,
      `source sans pro:400,400i`,
      `Poppins:300,400,500,700` // 按需调整需要的字重、斜体样式
    ],
    display: "swap",
  }
}

加载失败常见排查点 #

• 字体名称必须和Google Fonts官方标注完全一致，注意大小写、空格不要写错，Poppins首字母必须大写
• 原配置中source sans \pro的反斜杠是多余错误写法，直接删除即可
• 修改配置后必须清理Gatsby缓存再重启服务，执行命令gatsby clean && gatsby develop生效
• CSS中调用字体时，字体族名称要和配置完全匹配，示例写法：font-family: 'Poppins', sans-serif;

内容的提问来源于stack exchange，提问作者Douglas Sorge