如何将自定义本地字体添加到 Nextjs 13 Tailwind 项目？
gra*_*ury 24 fonts next.js tailwind-css
我已经下载了一些字体（不是 GOOGLE FONTS），我想在我的 Nextjs 13 Tailwind 项目中添加和使用它们。
我已按照 Nextjs 文档尝试添加单一字体（我想添加多种字体，但尝试添加单一字体不起作用）：
- npm 安装@next/font
- 将下载的字体文件添加到
/pages/fonts - 将字体添加到
/pages/_app.js - 将字体添加到
tailwind.config.js - 在组件中使用字体
更新了/pages/_app.js
import localFont from '@next/font/local'
const surt = localFont({
src: './fonts/Surt-Normal-Bold.woff2',
variable: '--font-surt-bold',
})
export default function MyApp({ Component, pageProps }) {
return (
<main className={surt.variable}>
<Component {...pageProps} />
</main>
)
}
更新了 tailwind.config.js（Surt 是无衬线字体）
const { fontFamily } = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
fontFamily: {
sans: ['var(--font-surt)', ...fontFamily.sans],
},
},
},
plugins: [],
}
更新了关于页面
export default function About() {
return <div className="font-surt-bold">About</div>
}
我做错了什么以及如何更新代码以添加另一种字体（例如 Surt-Normal-Regular.woff2、Surt-Normal-Semibold-Italic.woff2）
use*_*488 46
我的帖子完全归功于Lee Robinson和官方v13 文档。
下面还将帮助您使用新的 v13/app目录。
1.安装下一个字体
npm install @next/font
2.下载您的字体
就我而言，我下载了 Poppins 字体并将它们放入/public/fonts/
3.链接到您的字体文件
根据docs您可以编辑您的_app.js.
- 链接到您的本地字体
- 指定一个变量名
- 将类名分配给父 html 标签
就我而言，我使用新的应用程序目录：/src/app/layout.tsx
npm install @next/font
4. Tailwind配置中的参考
根据文档，您现在可以在tailwind.config.js.
import localFont from '@next/font/local'
const poppins = localFont({
src: [
{
path: '../../public/fonts/Poppins-Regular.ttf',
weight: '400'
},
{
path: '../../public/fonts/Poppins-Bold.ttf',
weight: '700'
}
],
variable: '--font-poppins'
})
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={`${poppins.variable} font-sans`}>
...
- 从 Next.js 13 开始，默认包含 `next/font`，因此您可以在不使用 `@` 字符的情况下导入它 - `import localFont from 'next/font/local'` - https://vercel.com/blog/ nextjs-下一个字体 (6认同)
- 你好。你知道如何在 MUI 项目中做同样的事情吗？我想在 MUI 全局主题中设置字体系列，并且还能够使用单个字体系列的不同样式。 (2认同)
按照使用字体的方式设置 TailwindCSS 后，您还应该添加font-sans要添加字体的 className。
在这种情况下，你_app.js应该是
import localFont from '@next/font/local'
const surt = localFont({
src: './fonts/Surt-Normal-Bold.woff2',
variable: '--font-surt-bold',
})
export default function MyApp({ Component, pageProps }) {
return (
<main className={`${surt.variable} font-sans`}>
<Component {...pageProps} />
</main>
)
}
如果您想要同一字体有不同的变体，您可以将数组传递给字体src。
你可以这样做
const surt = localFont({
src: [
{
path: "./fonts/Surt-Normal-Regular.woff2",
weight: "400",
style: "normal",
},
{
path: "./fonts/Surt-Normal-Bold.woff2",
weight: "700",
style: "normal",
},
{
path: "./fonts/Surt-Normal-Black.woff2",
weight: "900",
style: "normal",
},
],
variable: "--font-surt-bold",
});
文档中提到了这里
If you console.log(surt),
const surt = localFont({
src: "../fonts/test.woff2",
variable: "--font-test-bold",
});
console.log("surt", surt);
you get this
// I used different font so values might be different
surt {
style: { fontFamily: "'__surt_899d56', '__surt_Fallback_899d56'" },
className: '__className_899d56',
variable: '__variable_899d56'
}
You dont need any configuration. All you have to do is apply this surt.className to an element and that font will be applied to all children.
<main className={surt.className}>
<Component {...pageProps} />
</main>
It works both for client components and app directory
- how to apply this to any component in the project
I did the above configuration in _app.js and I did use any className or variable
import localFont from "@next/font/local";
const surt = localFont({
src: "../public/test.woff2",
variable: "--font-surt",
// I added this maybe fallback works but it did not
fallback: ["'Apple Color Emoji'"],
});
console.log("surt", surt);
export default function MyApp({ Component, pageProps }) {
return (
<main>
<Component {...pageProps} />
</main>
);
}
After you configure the tailwind.css the way you did, we should be able to use font-sans class anywhere in the project but no matter what I tried, tailwind does not inject it (it must be a bug). Workaround is like this. If you console the font, you will get this:
className: "__className_899d56"
style: {fontFamily: "'__surt_899d56', 'Apple Color Emoji','__surt_Fallback_899d56'"}
variable: "__variable_899d56"
I copied the style property from console (You could prop drill) and manually used it:
<p
className="'__className_899d56'"
style={{ fontFamily: "__surt_899d56" }}
>
with font testing
</p>
- 谢谢你！如何添加多种字体并在特定组件中使用该字体......不适用于所有组件 (3认同)
| 归档时间： |
|
| 查看次数： |
44868 次 |
| 最近记录： |