Next.js 14导入Google字体Istok_Web报错：TypeError不是函数

问题排查与修复方案 #

1. 修正导入路径的多余斜杠 #

你的导入路径末尾多了斜杠，导致模块解析异常，修改为：

import { Istok_Web } from "next/font/google"

2. 确认字体权重配置 #

Istok Web仅支持400（常规）和700（粗体）两种权重，当前配置没问题，若仍报错可尝试数组形式声明权重：

const istokWeb = Istok_Web({ weight: ["400"], subsets: ["latin"] })

3. 尝试单独导入字体模块 #

如果上述方法无效，可直接导入对应字体的独立模块：

import istokWeb from "next/font/google/istok-web"

const font = istokWeb({ weight: "400", subsets: ["latin"] })

4. 验证className的正确应用 #

确保在motion组件中正确绑定字体的className，示例代码：

import { motion } from "framer-motion"
import { Istok_Web } from "next/font/google"

const istokWeb = Istok_Web({ weight: "400", subsets: ["latin"] })

export default function YourComponent() {
  return (
    <motion.h1 className={istokWeb.className}>测试Istok Web字体</motion.h1>
  )
}

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