Next.js fonts in css stylesheet

I am starting a new project with NextJS (version 14.2.13). I have imported two fonts from google fonts using the following code:

./app/fonts.ts

import { Montserrat, Open_Sans } from 'next/font/google'

export const montserrat = Montserrat({
    subsets: ['latin'],
    variable: '--font-montserrat',
    display: 'swap',
});

export const open_sans = Open_Sans({
    subsets: ['latin'],
    variable: '--font-open-sans',
    display: 'swap',
});

And when applying the font to an element, everything works fine:

.app/page.tsx

import {montserrat} from "./fonts";


export default function Home() {
  return (
      <>
          <h1 className={`${montserrat.className}`}>Hello World</h1>
      </>
  );
}

However, since my application grows very large, I would like to apply a global style. How can I do something like:

.app/globals.css

h1 {
  font-family: "open-sans";
}

h6 {
  font-family: "montserrat";
}

and have the fonts I imported with Next.js applied globally to all h1 and h6 elements, respectively?

You need to sign in to view this answers

Related Post