Next.js 13中如何导入多种字重的Poppins字体？

我尝试从@next/fonts/google导入Poppins字体的多种字重，但Poppins不是可变字体，需要手动定义字重。我写了如下代码：

const poppins = Poppins(
{
    weight: `100`|`200`|`300`|`400`|`500`|`600`|`700`|`800`|`900`,
  },
s)

运行后遇到以下错误：

./app/layout.jsx
Error: 
  x Font loader values must be explicitly written literals.
   ,----
 6 | weight: `100 | 200 | 300| 400 | 500 | 600 | 700 | 800 | 900`,
   :         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   `----

  x Font loader values must be explicitly written literals.
   ,----
 8 | s
   : ^
   `----

问题原因 #

1. weight参数写法错误：Next.js字体加载器要求多字重必须以字符串字面量数组形式传入，不能用类型语法的|拼接，也不能用模板字符串包裹。
2. 代码末尾多余的s是无效语法，直接导致语法错误。

正确代码示例 #

import { Poppins } from '@next/fonts/google';

const poppins = Poppins({
  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
  subsets: ['latin'] // 必须指定字体子集，否则会有加载警告
});

额外提示 #

• 不需要全部字重时，只保留需要的即可，比如weight: ['400', '700']
• 字体子集根据你的用户群体选择，常用的是latin，如果有其他语言需求可以添加对应子集

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