我已经下载了几种字体(不是Google字体),并想在我的Nextjs 13 Tailwind项目中添加和使用它们。
我已经按照Nextjs文档尝试添加单个字体(我想添加多个字体,但是尝试添加单个字体没有成功):
1. npm install @next/font 2. 将下载的字体文件添加到/pages/fonts目录下 3. 将字体添加到/pages/_app.js文件中 4. 将字体添加到tailwind.config.js文件中 5. 在组件中使用该字体
更新/pages/_app.js文件。
我已经按照Nextjs文档尝试添加单个字体(我想添加多个字体,但是尝试添加单个字体没有成功):
1. npm install @next/font 2. 将下载的字体文件添加到/pages/fonts目录下 3. 将字体添加到/pages/_app.js文件中 4. 将字体添加到tailwind.config.js文件中 5. 在组件中使用该字体
更新/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)?
next/font
,因此您可以在不使用@
字符的情况下导入它 -import localFont from 'next/font/local'
- https://vercel.com/blog/nextjs-next-font - Yoav Kadosh