当前的Next.js字体优化文档和@next/Font API参考描述了如何引入谷歌字体以及本地字体文件，但引入Typekit/Adobe字体的最佳实践没有描述。
使用Typekit/Adobe Fonts以应用Next.js优化的最佳方法是什么?
@next/font还不支持Typekit，并且在他们的GitHub repo上没有任何相关的问题(可能是由于Typekit本身的法律限制)。
然而，这并不意味着你不能在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中有一些内容(保存请求到Typekit):
<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(其中一些方法已被弃用，会给你警告)。