Next.js 13+ 中集成 Google Fonts 的最佳实践-js教程-PHP中文网

Next.js 13+ 中集成 Google Fonts 的最佳实践

花韻仙語

发布： 2025-10-04 11:20:21

原创

884人浏览过

Next.js 13+ 中集成 Google Fonts 的最佳实践

Next.js 13 及更高版本引入了优化的字体加载机制，彻底改变了 Google Fonts 的集成方式。传统的 <link> 标签或 @import 方法不再推荐。本文将详细指导您如何利用 next/font/google 模块，以高性能、无布局偏移的方式在 Next.js 13+ 项目中无缝引入和应用 Google Fonts。

在 next.js 13 之前，开发者通常通过在 _document.js 或 _app.js 文件中添加 <link> 标签，或者在全局 css 文件中使用 @import 规则来引入 google fonts。然而，随着 next.js 13 引入 app router 架构以及对性能和用户体验的更高要求，这些传统方法已不再适用或不再推荐。next.js 官方提供了 @next/font 模块，旨在解决字体加载过程中可能出现的布局偏移（cls）问题，并提供更优化的字体加载体验。

Next.js 13+ 推荐方案：使用 @next/font/google

@next/font/google 是 Next.js 13 专为 Google Fonts 设计的内置模块。它会在构建时自动下载字体文件，并将其托管在您的应用程序中，从而消除了对外部网络请求的依赖。此外，它还能够自动处理字体回退，减少布局偏移，并优化字体加载性能。

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

在 Next.js 13 的 App Router 架构中，app/layout.js 是定义全局布局和元数据的地方。我们在这里导入并配置 Google Fonts。

导入字体： 从 next/font/google 中导入您想要使用的特定 Google Font。例如，要使用 Poppins 字体，您可以这样导入：
```
import { Poppins } from 'next/font/google';
```
登录后复制
初始化字体对象： 调用导入的字体函数，并传入配置选项。这些选项允许您定义字体的子集、显示方式、权重以及一个 CSS 变量名。
- subsets: 指定要加载的字体子集，例如 ['latin']。这有助于减小字体文件大小。
- display: 定义字体加载策略。'swap' 是一个常用选项，它允许浏览器在字体加载完成前使用系统字体作为回退，加载完成后再替换为 Google Font，从而避免文本不可见（FOIT）的问题。
- variable: 定义一个 CSS 变量名，您可以通过这个变量在 CSS 中引用字体。这是一个非常实用的特性，能够提供更灵活的字体管理。
- weight: 指定要加载的字体粗细（字重）。您可以提供一个数组来加载多个字重，例如 ['100', '200', ..., '900']。
```
const poppins = Poppins({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-poppins', // 定义一个CSS变量
  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900']
});
```
登录后复制

将字体变量应用到 <html> 标签： 在 RootLayout 组件中，将初始化后的字体对象的 variable 属性值作为 className 添加到 <html> 标签上。这样，字体变量将在整个应用程序中全局可用。

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

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

登录后复制

完整 app/layout.js 示例：

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

// 初始化 Poppins 字体，配置子集、显示方式、CSS变量和字重
const poppins = Poppins({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-poppins', // 定义CSS变量名
  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900']
});

export const metadata = {
  title: '我的 Next.js 应用',
  description: '这是一个使用 Next.js 13+ 构建的应用示例',
}

export default function RootLayout({ children }) {
  return (
    // 将字体变量作为 className 添加到 <html> 标签
    <html lang="zh-CN" className={`${poppins.variable}`}>
      <body>{children}</body>
    </html>
  )
}

登录后复制

步骤二：在 CSS 中使用字体变量

一旦您在 app/layout.js 中配置了字体变量，就可以在任何 CSS 文件（无论是全局 CSS、模块化 CSS 还是 Tailwind CSS）中通过 var() 函数引用它。

/* 例如，在 global.css 或任何组件的 CSS 模块中 */
body {
  font-family: var(--font-poppins), sans-serif; /* 使用定义的CSS变量 */
}

h1 {
  font-family: var(--font-poppins), serif;
  font-weight: 700; /* 可以直接使用字重 */
}

.custom-text {
  font-family: var(--font-poppins);
  font-weight: 500;
  font-style: italic;
}

登录后复制

在上述示例中，var(--font-poppins) 会被 Next.js 自动替换为加载的 Poppins 字体。添加 sans-serif 或 serif 作为回退字体是一个良好的实践，以确保在字体加载失败时页面仍能保持可读性。

注意事项与最佳实践

性能优势： next/font 模块通过在构建时下载字体并将其作为静态资源服务，避免了运行时对 Google Fonts API 的额外网络请求，从而显著提升了页面加载性能。

AI Sofiya
一款AI驱动的多功能工具

103

查看详情
布局偏移（CLS）优化： display: 'swap' 选项以及 Next.js 内部的优化机制，能够有效减少字体加载导致的布局偏移，提升用户体验。
CSS 变量的灵活性： 使用 CSS 变量 (--font-poppins) 使得在整个项目中管理和切换字体变得非常灵活和方便。
多字体加载： 如果您需要加载多种 Google Fonts，只需在 app/layout.js 中重复导入和初始化过程，为每种字体定义不同的 CSS 变量即可。
本地字体： 对于自定义的本地字体，Next.js 提供了 next/font/local 模块，其使用方式与 next/font/google 类似，可以实现同样的性能优化。
Tailwind CSS 集成： 如果您使用 Tailwind CSS，可以在 tailwind.config.js 中扩展主题，将字体变量映射到 Tailwind 的 font-family 实用类中，例如：
```
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        poppins: ['var(--font-poppins)', 'sans-serif'],
      },
    },
  },
  plugins: [],
};
```
登录后复制
然后在组件中就可以这样使用：<p className="font-poppins">Hello World</p>。

总结

Next.js 13+ 通过 @next/font/google 模块提供了一种现代化、高性能且易于管理的 Google Fonts 集成方案。它不仅解决了传统方法中存在的性能和布局偏移问题，还通过 CSS 变量提供了极大的灵活性。遵循本文介绍的步骤，您将能够轻松地在 Next.js 13+ 项目中引入并应用 Google Fonts，为您的用户提供更流畅、更美观的视觉体验。告别繁琐的 <link> 标签和 @import 规则，拥抱 Next.js 官方推荐的字体优化策略吧。

以上就是Next.js 13+ 中集成 Google Fonts 的最佳实践的详细内容，更多请关注php中文网其它相关文章！