使用 NextJs 和 tailwindCSS 自定义 google 字体

Question

我想在我的 NextJS 应用程序中使用 google 字体。我使用 tailwindCSS 并且我已经在 _document.js Head section 中导入了引用 link 。在 tailwind.config 文件中，我定义了我的 fontFamily，但是当我尝试使用自定义 class 时，它不会将字体系列应用于 html 元素。我做错了什么？

我的 _document.js 文件：

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

tailwind.config 文件:

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        press: ["Press Start 2P", ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [],
};

我想使用自定义字体的文本：

<h2 className="font-press text-3xl">
          This is a random text with custom google font family Press Start 2P!
</h2>

Answer 1

您必须在 tailwind.config.js:

中的字体名称周围使用单引号

    // ...
    extend: {
      fontFamily: {
        press: ['"Press Start 2P"', ...defaultTheme.fontFamily.sans],
      },
    },

Answer 2

这是我的 reference 和解决方案：

_document.js

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link
            rel="preconnect"
            href="https://fonts.gstatic.com"
            crossOrigin="true"
          />
          <link
            href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Syne+Mono&family=Ubuntu+Mono&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    fontFamily: {
      syne_mono: ["Syne Mono", "monospace"],
      press: ["Press Start 2P", "cursive"],
      ubuntu: ["Ubuntu Mono", "monospace"],
    },

    extend: {},
  },
  plugins: [],
};

index.js（首页）

import Head from "next/head";

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div className="flex items-center justify-center h-screen flex-col gap-5">
        <h1 className="text-6xl text-blue-600 p-3">Custom Fonts:</h1>
        <h2 className="font-syne_mono text-6xl">Syne Mono, monospace</h2>
        <h2 className="font-press text-6xl">Press Start 2P, cursive;</h2>
        <h2 className=" font-ubuntu text-6xl">Ubuntu Mono, monospace;</h2>
      </div>
    </div>
  );
}

输出：

“下一个”：“12.0.7”，“反应”：“17.0.2”，“tailwindcss”：“^3.0.5”

使用 NextJs 和 tailwindCSS 自定义 google 字体

Custom google fonts with NextJs and tailwindCSS

reactjs

next.js

tailwind-css

google-fonts