Next.js 15：如何单次导入多权重本地字体并全局复用

你只需要在localFont配置中添加variable字段，将多权重字体绑定到同一个CSS变量，后续用法和单字体文件的全局传递逻辑完全一致：

1. 配置字体并绑定CSS变量
   修改你的mPlus字体配置，新增variable属性指定自定义变量名：

   const mPlus = localFont({
     src: [
       {
         path: "./fonts/MPLUSRounded1cBold.ttf",
         weight: "700",
         style: "normal",
       },
       {
         path: "./fonts/MPLUSRounded1c.ttf",
         weight: "400",
         style: "normal",
       },
     ],
     variable: "--font-m-plus", // 绑定到自定义CSS变量
   });
   

2. 在顶层布局全局注入变量
   和之前的Geist Sans一样，把字体变量添加到body的className中，让所有子组件都能访问：

   <body className={`${geistSans.variable} ${mPlus.variable} antialiased`}>
     {children}
   </body>
   

3. 在组件中复用字体（自动匹配权重）
   现在可以在任意组件中通过CSS变量引用该字体，直接用font-weight指定对应权重即可，Next.js会自动匹配你配置的对应字体文件：

   {/* 400权重文本 */}
   <p className="font-[family-name:var(--font-m-plus)] font-normal">常规内容</p>
   {/* 700权重文本 */}
   <p className="font-[family-name:var(--font-m-plus)] font-bold">加粗内容</p>
   {/* 也可以直接指定weight数值 */}
   <p className="font-[family-name:var(--font-m-plus)]" style={{ fontWeight: 700 }}>加粗内容</p>
   

可选优化：Tailwind CSS自定义字体族 #

如果项目使用Tailwind，可以在配置文件中注册该字体，用起来更简洁：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        'm-plus': ['var(--font-m-plus)'], // 注册自定义字体族
      },
    },
  },
  plugins: [],
};

之后直接用Tailwind类名即可：

<p className="font-m-plus font-normal">常规内容</p>
<p className="font-m-plus font-bold">加粗内容</p>

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