时间戳

首页 > 解决方案 > 使用 Gatsby Plugin Google Fonts 添加多种字体的语法是什么？

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

问题描述

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

谢谢您的帮助。

标签： syntaxgatsbygoogle-fonts

解决方案

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

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

这是因为Google Fonts API 已更新到 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']
        }
      ]
    }
  }
];

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

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

推荐阅读