将自定义字体导入 Next JS 13

Question

我在弄清楚如何将自定义字体导入到 next js 13 中时遇到了麻烦。第一个问题是 next js 文档有一个关于如何使用 google fonts 执行此操作的完整示例，但他们没有列出有关使用 typekit 的任何内容。另一件事是，我在网上看到的几乎所有示例都在谈论这个声称正在使用 Next JS 13，但是它们都无法识别新 App 目录和旧 Pages 目录之间的区别。根据下一个 js 13 有关字体的文档：

虽然内联 CSS 在页面中仍然有效（next js v. 12），但它在应用程序中不起作用（next js v. 13）。您应该使用 next/font 代替。

因此，这里是讨论版本 13 的新 next/font 方法的文档： https://nextjs.org/docs/app/building-your-application/optimizing/fonts

然而，这个文档只展示了如何做谷歌字体；甚至页面顶部的视频也显示他们使用旧的页面目录。

那么，如何使用新 App 目录的新 next/font 方法将自定义 TYPEKIT 字体导入 Next.JS 13 并使用？

Answer 1

登录您的 Adob​​e Creative Cloud。将字体同步到您的抄送帐户。在 Windows 上转到

C:\Users\YOURNAME\AppData\Roaming\Adobe\CoreSync\plugins\livetype\r\

OSX：麦金塔

HD/Users/YOURNAME/Library/Application Support/Adobe/CoreSync/plugins/livetype/.r/

在那里，您将在本地找到所有 Typekit 字体文件，这些文件已同步到您的 CC。将文件重命名为.ttf.

将该文件导入到您的 nextjs 项目文件夹中。然后使用nextjs本地字体优化。

import localFont from '@next/font/local'
const myFont =localFont({src:*font_file_path* })