Next.js 13及以上版本如何导入Google Fonts？Link标签失效

以下是几种可靠的实现方式，按官方推荐优先级排序：

1. 使用Next.js官方next/font（推荐） #

这是Next.js 13+官方主推的字体方案，自动完成字体预加载、优化，无需手动添加链接标签。

App Router（app/layout.js）示例： #

import { Poppins } from 'next/font/google';

// 配置需要的字重、样式和子集
const poppins = Poppins({
  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
  display: 'swap',
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={poppins.className}>
      <body>{children}</body>
    </html>
  );
}

• 全局生效：通过给<html>添加poppins.className，全站默认使用Poppins字体
• 局部使用：也可以单独给某个组件添加className={poppins.className}
• 自定义变量：若需要用CSS变量控制，可添加variable: '--font-poppins'，然后在CSS中用font-family: var(--font-poppins)

2. 在根布局中直接添加<link>标签 #

如果偏好传统链接方式，需在App Router的根布局中直接写入<head>标签（无需导入next/head）：

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" />
      </head>
      <body>{children}</body>
    </html>
  );
}

• 若使用Pages Router，仍可在_app.js或_document.js中通过next/head的Head组件添加上述标签。

3. 全局CSS导入 #

确保CSS文件被正确导入到根组件后，即可用@import引入字体：

步骤1：导入全局CSS文件 #

• App Router：在app/layout.js中添加import './globals.css';
• Pages Router：在pages/_app.js中添加import '../styles/globals.css';

步骤2：在全局CSS中引入字体 #

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
  font-family: 'Poppins', sans-serif;
}

• 之前失效大概率是因为CSS文件未被根组件正确导入，或使用了旧版Google Fonts URL（建议用v2格式）。

内容的提问来源于stack exchange，提问作者victor.ja