如何在next.js13中导入多个字体粗细？

Question

我正在尝试从

@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
   : ^
   `----

Answer 1

这似乎有效：

import { Roboto } from '@next/font/google';

const font900 = Roboto({
    weight: '900',
});

const font100 = Roboto({
    weight: '100',
});

Answer 2

我就是这样做的，

import { poppins } from '@next/font/google'

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

Answer 3

我在我的 NEXT js typescript 项目中获取了同样的问题

import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css'
import { Bebas_Neue } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] })
const bebasNeue = Bebas_Neue({ subsets: ['latin'], weight: ['400' as const], variable: '--bebas-font' })