Next.js 13 及更高版本引入了优化的字体加载机制，彻底改变了 Google Fonts 的集成方式。传统的 标签或 @import 方法不再推荐。本文将详细指导您如何利用 next/font/google 模块，以高性能、无布局偏移的方式在 Next.js 13+ 项目中无缝引入和应用 Google Fonts。
在 next.js 13 之前，开发者通常通过在 _document.js 或 _app.js 文件中添加 标签，或者在全局 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 添加到 标签上。这样，字体变量将在整个应用程序中全局可用。
export const metadata = { title: '页面标题', description: '页面描述',}export default function RootLayout({ children }) { return ( // 将字体变量应用到HTML标签 {children} )}
完整 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 添加到 标签 {children} )}
步骤二：在 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 的额外网络请求，从而显著提升了页面加载性能。
布局偏移（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: [],};
然后在组件中就可以这样使用：
Hello World
。
总结
Next.js 13+ 通过 @next/font/google 模块提供了一种现代化、高性能且易于管理的 Google Fonts 集成方案。它不仅解决了传统方法中存在的性能和布局偏移问题，还通过 CSS 变量提供了极大的灵活性。遵循本文介绍的步骤，您将能够轻松地在 Next.js 13+ 项目中引入并应用 Google Fonts，为您的用户提供更流畅、更美观的视觉体验。告别繁琐的 标签和 @import 规则，拥抱 Next.js 官方推荐的字体优化策略吧。
以上就是Next.js 13+ 中集成 Google Fonts 的最佳实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1526211.html
微信扫一扫 
支付宝扫一扫 
