当前的 Next.js 字体优化文档 和 @next/font API 参考 描述了如何引入 Google Fonts 以及本地字体文件，但没有描述引入 Typekit / Adobe Fonts 的最佳实践。
使用 Typekit / Adobe Fonts 以便应用 Next.js 优化的最佳方式是什么？
@next/font但是，这并不意味着您不能在 Next.js 中使用 Typekit 字体。在 Next.js 13 之前，它有一个称为自动字体优化的功能，该功能仍然存在，并且支持 Typekit（在
vercel/next.js#24834它基本上会内联你的字体 CSS。所以，如果你有：
// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'
const Document = () => {
return (
<Html>
<Head>
<link rel="stylesheet" href="https://use.typekit.net/plm1izr.css" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
export default Document
然后 Next.js 将生成包含如下内容的文档
head<link rel="preconnect" href="https://use.typekit.net" crossorigin />
<!-- ... -->
<style data-href="https://use.typekit.net/plm1izr.css">
@import url('https://p.typekit.net/p.css?s=1&k=plm1izr&ht=tk&f=32266&a=23152309&app=typekit&e=css');
@font-face {
font-family: 'birra-2';
src: url('https://use.typekit.net/af/23e0ad/00000000000000003b9b410c/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3')
format('woff2'),
url('https://use.typekit.net/af/23e0ad/00000000000000003b9b410c/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3')
format('woff'),
url('https://use.typekit.net/af/23e0ad/00000000000000003b9b410c/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3')
format('opentype');
font-display: auto;
font-style: normal;
font-weight: 700;
font-stretch: normal;
}
.tk-birra-2 {
font-family: 'birra-2', serif;
}
</style>
这是集成套件，您可以查看添加样式表链接的不同方法：https://github.com/vercel/next.js/tree/canary/test/integration/font-optimization/fixtures/ with-typekit（其中一些方法已被弃用，并且会给您警告）。
我正在使用应用程序目录，并且只需在layout.tsx上添加链接引用即可添加Adobe字体，而无需创建“pages/_document.tsx”，如下所示：
应用程序/layout.tsx
<html lang='en'>
<head>
<link rel='stylesheet' href='https://use.typekit.net/plm1izr.css' />
</head>
<body className={``}>
// your body code
</body>
</html>
而且，因为我正在使用 TailwindCSS：
tailwind.config.js
theme: {
extend: {
fontFamily: {
'font-1': ['your-font-1-name'],
'font-2': ['your-font-2-name'],
other fonts...,
},
您可以通过单击 typekit 参考链接来检查要添加到数组中的字体名称。