将 Typekit / Adobe 字体与 @next/font 一起使用答案

【问题标题】：Using Typekit / Adobe Fonts with @next/font将 Typekit / Adobe 字体与 @next/font 一起使用
【发布时间】：2022-12-04 23:48:54
【问题描述】：

当前的Next.js Font Optimization docs和@next/font API Reference描述了如何引入Google Fonts和本地字体文件，但是没有描述引入Typekit / Adobe Fonts的最佳实践。

使用 Typekit / Adobe Fonts 以便应用 Next.js 优化的最佳方法是什么？

【问题讨论】：

标签： next.js typekit

【解决方案1】：

Next.js 为优化字体文件的交付提供了内置支持。要将 Typekit / Adobe Fonts 与 Next.js 一起使用，您可以使用 @zeit/next-css 和 @zeit/next-fonts 包导入和优化 Next.js 应用程序中的字体文件。

首先，您需要通过运行以下命令来安装这些包：

npm install --save @zeit/next-css @zeit/next-fonts

接下来，您需要在项目的根目录中创建一个 next.config.js 文件，并向其中添加以下代码：

const withCSS = require('@zeit/next-css')
const withFonts = require('@zeit/next-fonts')

module.exports = withCSS(withFonts())

这将支持在 Next.js 应用程序中导入和优化 CSS 和字体文件。

要使用 Typekit / Adobe Fonts，您需要先将字体导入您的 Typekit / Adobe 帐户，然后生成所需的 CSS 代码以将字体包含在您的应用程序中。获得 CSS 代码后，您可以将其添加到项目中的 style.css 文件，然后使用 import 语句将其导入 Next.js 应用程序，如下所示：

// Import the font styles
import '../styles/style.css'

Next.js 将自动优化字体文件的传送，它们将异步加载以确保它们不会阻塞应用程序的呈现。

然后，您可以通过将适当的字体系列应用于 CSS 样式中的相关元素来在您的应用程序中使用该字体，如下所示：

body {
  font-family: 'My Font';
}

我希望这有帮助！

【讨论】：