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
Leave feedback about this