CODEWITHSUNDEEP
reactjsnext.jstailwind-cssgoogle-fonts
Phaki
Phaki

Reputation: 303

Custom google fonts with NextJs and tailwindCSS

I would like to use google fonts in my NextJS app. I use tailwindCSS and I already imported reference link in the _document.js Head section . In the tailwind.config file I defined my fontFamily, but when I try to use the custom class it does not apply the font family to the html element. What am I doing wrong?

My _document.js file:

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 file:

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: [],
};

Text where I want to use the custom font:

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

Upvotes: 4

Views: 4244

Answers (2)

MarioG8
MarioG8

Reputation: 5921

This is my reference and solution:

_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 (home page)

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

output:

enter image description here

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

Upvotes: 5

Micha&#235;l Perrin
Micha&#235;l Perrin

Reputation: 6238

You have to use single quotes around the font name in tailwind.config.js:

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

Upvotes: 2

Related Questions