logo标签列表

使用NextJs和tailwindCSS定制谷歌字体

reactjsnext.jstailwind-cssgoogle-fonts
4

我想在我的NextJS应用中使用Google字体。我使用tailwindCSS，并在_document.js头部导入了参考链接。在tailwind.config文件中，我定义了我的fontFamily，但是当我尝试使用自定义类时，它不会将字体族应用到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>
2个回答
5
这是我的参考资料和解决方案：

_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>
  );
}
输出：

结果：

在此输入图像描述

"next": "12.0.7","react": "17.0.2","tailwindcss": "^3.0.5"

2

在tailwind.config.js中，必须使用单引号括起字体名称：

    // ...
    extend: {
      fontFamily: {
        press: ['"Press Start 2P"', ...defaultTheme.fontFamily.sans],
      },
    },
是的，这就是我在代码中遗漏的部分。谢谢你解决了它，我接受了你的答案！ - Phaki
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接