如何在Next.js中动态导入内置Google字体？

Next.js 的 next/font/google 不支持直接通过变量解构导入字体——因为ES模块导入是静态编译的，必须在编译阶段确定导入的具体字体名称，你尝试的动态解构写法不符合语法规范，自然无法生效。下面是两种可行的实现方式：

方法一：预导入候选字体 + 映射表（推荐） #

如果你的动态字体范围是确定的，先预导入所有可能用到的字体，再通过对象映射动态选择，这种方式能保留Next.js的字体优化特性（自动预加载、子集化、缓存）。

// 提前导入所有可能用到的字体
import { Poppins, Roboto, Inter } from "next/font/google";

// 创建字体配置映射表，key为字体名称，value为初始化后的字体对象
const fontMap = {
  Poppins: Poppins({ weight: ['300'], subsets: ['latin'] }),
  Roboto: Roboto({ weight: ['400'], subsets: ['latin'] }),
  Inter: Inter({ weight: ['500'], subsets: ['latin'] })
};

// 动态指定字体名称（可从props、状态或配置中获取）
const selectedFont = "Poppins";
const setFont = fontMap[selectedFont];

应用方式和常规导入一致：

<html>
  <body className={setFont.className}>
    {children}
  </body>
</html>

方法二：动态导入（适用于大量字体场景） #

如果需要支持的字体数量极多，预导入会增加打包体积，可以用动态import加载字体，但这种方式会丢失部分Next.js的字体优化能力，且需要处理加载状态：

import { useEffect, useState } from 'react';

const DynamicFontWrapper = ({ fontName, children }) => {
  const [activeFont, setActiveFont] = useState(null);

  useEffect(() => {
    const loadTargetFont = async () => {
      try {
        // 动态导入next/font/google模块
        const fontModule = await import('next/font/google');
        // 获取对应字体的初始化函数
        const fontInitFn = fontModule[fontName];
        
        if (fontInitFn) {
          // 初始化字体
          const loadedFont = fontInitFn({ weight: ['300'], subsets: ['latin'] });
          setActiveFont(loadedFont);
        }
      } catch (error) {
        console.error(`加载字体${fontName}失败:`, error);
      }
    };

    loadTargetFont();
  }, [fontName]);

  // 字体加载完成前显示占位内容
  if (!activeFont) {
    return <div className="font-loading">加载中...</div>;
  }

  return <div className={activeFont.className}>{children}</div>;
};

// 使用示例
<DynamicFontWrapper fontName="Poppins">
  这里是使用动态字体的内容
</DynamicFontWrapper>

注意事项 #

• 优先选择方法一，因为Next.js会对静态导入的字体做自动优化，提升页面加载性能；
• 动态导入可能会导致字体加载延迟，需要做好加载状态的兜底处理；
• 确保动态传入的fontName是next/font/google支持的字体名称，否则会加载失败。

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