当前位置：首页 > 文章列表 > 文章 > 前端 > Next.js13集成GoogleFonts新教程

Next.js13集成GoogleFonts新教程

2025-10-14 19:27:37 0浏览收藏

还在为 Next.js 13+ 项目中集成 Google Fonts 而烦恼吗？本文为你带来最新的解决方案！告别传统的 `` 标签和 `@import` 方式，利用 Next.js 内置的 `next/font/google` 模块，轻松实现 Google Fonts 的集成和优化。本文将详细介绍如何在 Next.js 13+ 项目中使用 `next/font/google` 模块，配置字体、全局应用，并在 CSS 中使用自定义字体变量，实现零布局偏移和高性能加载。掌握 Next.js 13+ 字体管理的新范式，让你的网站拥有更快的加载速度和更出色的用户体验！

Next.js 13+ 中集成 Google Fonts 的现代方法与性能优化

本文详细介绍了在 Next.js 13 及更高版本项目中集成 Google Fonts 的推荐方法。通过利用 next/font/google 模块，开发者可以告别传统标签或 @import 方式，实现 Google Fonts 的自动优化、零布局偏移和高性能加载。教程将涵盖字体配置、全局应用以及在 CSS 中使用自定义字体变量的完整流程。

Next.js 13+ 字体管理的新范式

在 Next.js 13 及更高版本中，随着 App Router 的引入，管理外部字体（尤其是 Google Fonts）的方式发生了显著变化。过去常用的在 _document.js 或 _app.js 中添加标签，或者在全局 CSS 文件中使用 @import 规则的方法，可能不再适用或不再是最佳实践。Next.js 官方推荐使用内置的 next/font 模块来处理字体，它提供了自动字体优化、零布局偏移（CLS）以及更好的性能体验。

next/font 模块会自动下载 Google Fonts 并在构建时进行自托管，从而避免了浏览器对外部资源的额外请求，并消除了布局偏移。它还支持定义 CSS 变量，使得在应用程序的任何地方使用字体变得非常方便。

使用 next/font/google 集成 Google Fonts

以下是在 Next.js 13+ 项目中集成 Google Fonts 的详细步骤。我们将以 Poppins 字体为例。

步骤一：在 app/layout.js 中配置字体

在 Next.js 13 的 App Router 架构中，app/layout.js 文件是应用程序的根布局。我们将在该文件中导入并配置 Google Fonts。

首先，从 next/font/google 导入你需要的字体。例如，要导入 Poppins 字体，你可以这样做：

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

// 配置 Poppins 字体
const poppins = Poppins({
  subsets: ['latin'], // 指定字体子集，减少文件大小
  display: 'swap',   // 控制字体加载行为，'swap' 表示使用系统字体直到自定义字体加载完成
  variable: '--font-poppins', // 定义一个 CSS 变量名，方便在 CSS 中引用
  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] // 指定需要加载的字重
});

export const metadata = {
  title: '您的页面标题',
  description: '您的页面描述',
}

export default function RootLayout({ children }) {
  return (
    // 将字体变量应用到 <html> 元素
    <html lang="zh-CN" className={`${poppins.variable}`}>
      <body>{children}</body>
    </html>
  )
}

配置选项说明：

subsets: 数组类型，指定需要加载的字符子集。这有助于减小字体文件大小，提高加载速度。例如 ['latin']。
display: 字符串类型，控制字体加载时的显示行为。
- swap: 字体加载期间使用系统字体，加载完成后替换为自定义字体（推荐，可避免文本不可见，但可能出现布局偏移）。
- optional: 浏览器决定是否使用自定义字体。
- block: 字体加载期间显示空白。
- fallback: 类似于 swap，但有更短的阻塞期。
variable: 字符串类型，定义一个 CSS 变量名。Next.js 会生成一个包含字体族名称的 CSS 变量，例如 --font-poppins，你可以在 CSS 中使用 var(--font-poppins) 来引用该字体。
weight: 数组或字符串类型，指定需要加载的字重。例如 ['400', '700'] 或 '400'。如果需要所有字重，可以列出所有。
style: 数组或字符串类型，指定需要加载的字体样式（如 ['normal', 'italic']）。

步骤二：在 CSS 中使用自定义字体

一旦在 app/layout.js 中配置并应用了字体变量，你就可以在项目中的任何 CSS/SCSS/Tailwind CSS 文件中使用这个 CSS 变量了。

例如，在你的全局 CSS 文件（如 app/globals.css）或任何组件的 CSS 模块中：

/* app/globals.css 或其他 CSS 文件 */

body {
  /* 使用定义的 CSS 变量来应用 Poppins 字体 */
  font-family: var(--font-poppins), sans-serif;
}

.custom-text {
  font-family: var(--font-poppins), serif;
  font-weight: 500; /* 可以结合字重使用 */
}

这样，body 或 .custom-text 元素将应用 Poppins 字体。

注意事项与最佳实践

性能优势： next/font 模块通过自动自托管和减少网络请求，显著提高了字体加载性能。它还通过内联 CSS 和 font-display: optional 或 swap 来最小化布局偏移。
子集选择： 务必根据你的项目需求选择合适的 subsets。加载不必要的字符子集会增加字体文件大小，影响加载速度。
字重和样式： 只加载你实际需要的字重和样式。加载过多的字重也会增加字体文件大小。
display 属性： display: 'swap' 是一个很好的默认选择，因为它允许文本在字体加载时立即显示（使用系统字体），避免了“不可见文本闪烁”（FOIT）。

多个字体： 如果你需要使用多个 Google Fonts，可以重复上述步骤，为每个字体定义一个不同的 CSS 变量，并在元素上拼接多个变量。例如：

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

const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
const poppins = Poppins({ subsets: ['latin'], variable: '--font-poppins', weight: ['400', '700'] });

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN" className={`${inter.variable} ${poppins.variable}`}>
      <body>{children}</body>
    </html>
  )
}

然后在 CSS 中分别使用 var(--font-inter) 和 var(--font-poppins)。

本地字体： next/font 也支持本地字体。对于本地字体，你需要使用 next/font/local 模块。

总结

Next.js 13+ 引入的 next/font 模块是管理 Google Fonts 的现代化、高性能解决方案。它简化了字体集成过程，并通过自动化优化确保了出色的用户体验。通过遵循本文提供的步骤，你可以轻松地在 Next.js 项目中引入并应用自定义 Google Fonts，同时享受到框架带来的性能优势。告别传统方法，拥抱 next/font，让你的应用程序拥有更快的加载速度和更平滑的视觉呈现。

本篇关于《Next.js13集成GoogleFonts新教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！