/Javascript/Next.js/Tailwindcsss next js change font

Tailwindcsss next js change font

//You can override the default document file by adding the following code into the _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=Russo+One"
            rel="stylesheet"
          />
          <link
            href="https://fonts.googleapis.com/css2?family=Dancing+Script"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

//The final step will be to update the tailwind.config.js file.
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        sans: ['Russo One', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Source: javascript.plainenglish.io

Similar codes

0 vote335 views1 answer
Next js global layout
Javascript Next.js
0 vote354 views1 answer
Pass object to query on Router.push NextJs
Javascript Next.js
1 vote376 views1 answer
Next js typescript command
Javascript Next.js
0 vote321 views1 answer
Nextjs starter template with auth
Javascript Next.js
0 vote343 views1 answer
Change next js default port
Javascript Next.js
3 votes367 views1 answer
Next js typescript
Javascript Next.js
0 vote347 views1 answer
On click button change route next js
Javascript Next.js
0 vote341 views1 answer
Install bootstrap in nextjs
Javascript Next.js
48 votes367 views1 answer
Emmet not working in react nextjs
Javascript Next.js
43 votes410 views2 answers
Run nextjs in separate port
Javascript Next.js