如何在Nextjs 13 Tailwind项目中添加自定义本地字体？

oyjwcjzk 于 2022-12-03 发布在其他

关注(0)|答案(1)|浏览(262)

我已经下载了一对夫妇的字体（不是谷歌字体），我想添加和使用他们在我的Nextjs 13顺风项目。
我已经按照Nextjs文档尝试添加一种字体（我想添加多种字体，但尝试添加一种字体不起作用）：

npm安装@下一个/font
1.将下载的字体文件添加到/pages/fonts
1.将字体添加到/pages/_app.js
1.将字体添加到tailwind.config.js
1.在组件中使用字体
已更新/页面/_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. woff 2）

next.js

来源：https://stackoverflow.com/questions/74607996/how-to-add-custom-local-fonts-to-a-nextjs-13-tailwind-project

1条答案

按热度按时间

6l7fqoea1#

如果你console.log(surt)，

const surt = localFont({
  src: "../fonts/test.woff2",
  variable: "--font-test-bold",
});
console.log("surt", surt);

你得到了这个

// I used different font so values might be different
surt {
  style: { fontFamily: "'__surt_899d56', '__surt_Fallback_899d56'" },
  className: '__className_899d56',
  variable: '__variable_899d56'
}

你不需要任何配置。你所要做的就是将这个surt.className应用到一个元素上，这个字体将应用到所有的子元素上。

<main className={surt.className}>
      <Component {...pageProps} />
    </main>

它同时适用于客户端组件和app目录

如何将其应用于项目中的任何组件

我在_app.js中执行了上述配置，并且使用了任何className或变量

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>
  );
}

在你配置了tailwind.css之后，我们应该可以在项目的任何地方使用font-sans类，但是无论我怎么尝试，tailwind都不会注入它（这一定是一个bug）。解决方法是这样的。如果你控制字体，你会得到这样的结果：

className: "__className_899d56"
style: {fontFamily: "'__surt_899d56', 'Apple Color Emoji','__surt_Fallback_899d56'"}
variable: "__variable_899d56"

我从控制台复制了style属性（您可以使用prop drill）并手动使用它：

<p
    className="'__className_899d56'"
    style={{ fontFamily: "__surt_899d56" }}
  >
    with font testing
  </p>

赞(0）回复(0）举报 2022-12-03

我来回答

如何在Nextjs 13 Tailwind项目中添加自定义本地字体？

1条答案

相关问题

热门标签

最新问答