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

Question

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

20

我已经下载了几种字体（不是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文件。

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）？

- grabury

3个回答

5

在设置TailwindCSS以使用字体的方式之后，您还应该在要添加字体的className中添加font-sans。

在这种情况下，您的_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",
});

文档中提到了这里

- ivadyhabimana

4

如果您使用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>

- Yilmaz

2

谢谢！您如何添加多个字体并在特定组件中使用字体，而不是应用于所有组件？ - grabury

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rottitime · Accepted Answer

全文翻译感谢Lee Robinson和官方v13文档的支持。

下面的内容还将帮助您了解新版v13 /app目录。

1. 安装Next字体

npm install @next/font

2. 下载你的字体

我下载了 Poppins 字体并将它们放置在 /public/fonts/ 目录下。

3. 链接你的字体文件

根据文档，你可以编辑 _app.js 文件：

链接到你的本地字体文件
给它们分配一个变量名
将类名分配给父 HTML 标签

我正在使用新的应用程序目录：/src/app/layout.tsx

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`}>
    ...

4. 在Tailwind配置文件中引用

根据文档，您现在可以在tailwind.config.js文件中引用新变量。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/app/**/*.{js,ts,jsx,tsx}', // Note the addition of the `app` directory.
    './src/pages/**/*.{js,ts,jsx,tsx}',
    './src/components/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
   
    extend: {
      fontFamily: {
        sans: ['var(--font-poppins)']
      }
  
    }
  },
  plugins: []
}