如何在Next.js中用@next/font/google导入含空格的Google字体？

对于像Redacted Script这类名称带空格的Google字体，不能直接用驼峰命名（RedactedScript）导入——因为@next/font/google的导出项严格对应字体的原始名称，转驼峰后的名称不在导出列表中，所以会触发「Unknown font」错误。你可以用以下两种方法解决：

方法一：带引号的命名导入+别名 #

直接用字体的原始名称（带空格）作为导入项，并用as关键字别名为驼峰格式方便使用：

import { 'Redacted Script' as RedactedScript } from '@next/font/google'
const redactedScript = RedactedScript({ subsets: ['latin'] })

export default function MyComponent() {
  return (
    <main className={redactedScript.className}>
      Lorem ipsum dolar set amut
    </main>
  )
}

方法二：默认导入+指定family属性 #

使用默认导入后，在配置对象中明确指定family字段为字体的原始名称：

import GoogleFont from '@next/font/google'
const redactedScript = GoogleFont({
  family: 'Redacted Script',
  subsets: ['latin']
})

export default function MyComponent() {
  return (
    <main className={redactedScript.className}>
      Lorem ipsum dolar set amut
    </main>
  )
}

这两种方法都能正确加载带空格的Google字体，解决导入报错问题。

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