NextJS引入带字重的Google Font（Inter）失效问题求助

问题描述 #

我尝试在Next.js中通过CDN引入Google Fonts的Inter字体，发现不指定任何字重时字体能正常生效，但添加全字重（100-900）后字体就失效了。

可正常生效的代码 #

<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet"/>

无法生效的代码 #

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"/>

问题根源分析 #

从提供的代码来看，核心问题是重复引入字体资源：同时在_document.tsx的<Head>和全局样式文件中通过@import引入了Inter全字重字体，这会导致字体加载冲突，进而引发失效问题。此外，浏览器缓存也可能干扰新字体资源的加载，导致旧的无重字体覆盖新的全重字体。

解决方案 #

1. 移除重复的字体引入 #

保留_document.tsx中的字体引入（Next.js的_document是全局注入头部资源的最优位置，且已配置preconnect优化加载速度），删除全局样式文件中的@import语句。

修改后的_document.tsx

import Document, {
  DocumentContext,
  DocumentInitialProps,
  Html,
  Head,
  Main,
  NextScript,
} from "next/document";

class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext
  ): Promise<DocumentInitialProps> {
    const initialProps = await Document.getInitialProps(ctx);
    return initialProps;
  }
  render() {
    return (
      <Html>
        <Head>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link
            rel="preconnect"
            href="https://fonts.gstatic.com"
            crossOrigin="true"
          />
          <link 
            href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" 
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

修改后的全局样式文件

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body,
#__next {
  padding: 0;
  margin: 0;
  height: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

2. 确保Tailwind配置正确识别全字重 #

当前Tailwind配置已将Inter设为sans字体族的首选，这没问题。如果需要确保Tailwind生成全字重对应的工具类（如font-thin、font-black），可以在配置中明确声明字重映射：

/** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");
const headerHeight = "80px";

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./layouts/**/*.{js,ts,jsx,tsx}",
    "node_modules/daisyui/dist/**/*.js",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter", ...defaultTheme.fontFamily.sans],
      },
      height: {
        header: headerHeight,
      },
      padding: {
        header: headerHeight,
      },
      // 可选：明确声明全字重映射
      fontWeight: {
        thin: "100",
        extralight: "200",
        light: "300",
        normal: "400",
        medium: "500",
        semibold: "600",
        bold: "700",
        extrabold: "800",
        black: "900",
      }
    },
  },
  plugins: [require("daisyui"), require("@tailwindcss/typography")],
};

3. 清除缓存并重启服务 #

• 开发环境下：重启Next.js服务，避免旧的编译缓存干扰。
• 浏览器端：按下Ctrl+Shift+R强制刷新页面，清除浏览器缓存，确保加载最新的字体资源。

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