How to use Google fonts in nextjs - Posts

In this post, we will see how to use Google fonts in nextjs.

Import the head property from next

import Head from  'next/head'

Now paste the copied code inside the head tag as below

import Head from "next/head";
import Nav from "./Nav";

export default function Layout(props) {
  return (
    <div className="w-screen h-screen max-w-screen overflow-x-hidden font-montserrat">
      <Head>
        <link
          href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;900&display=swap"
          rel="stylesheet"
        />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>

      <Nav />
      {props.children}
    </div>
  );
}

Now you can use the font in any component