Using multiple fonts across pages in Next JS - import

Question

I'm used to importing google fonts in css files and then using the font-family property. But I want to utilize the "built-in automatic self-hosting" provided by #next/font.
#next/font includes built-in automatic self-hosting for any font file.
This new font system also allows you to conveniently use all Google Fonts with performance and privacy in mind. CSS and font files are downloaded at build time and self-hosted with the rest of your static assets. No requests are sent to Google by the browser.
So far I can only import and use multiple fonts in index.js. I want to use the same fonts in another page about.js without loading the fonts again.
How can I import multiple fonts from #next/font/google and use them across pages and components?
Is there a way I can attach the fonts to particular classes or selectors?
h1 {
font-family: "Exo 2", sans-serif;
}

Answer 1

We cannot attach #next/font/google fonts to particular classes using font-family because they have different names when imported.
We can reuse fonts by doing this:
Create a separate utils/fonts.js file:
import { Exo_2, Noto_Sans } from "#next/font/google";
export const titleFont = Exo_2({
weight: ["500", "600", "700"],
subsets: ["latin"],
});
export const textFont = Noto_Sans({
weight: ["500", "600", "700"],
subsets: ["latin"],
});
Import the fonts required in pages/index.js:
import { textFont, titleFont } from "../utils/fonts";
Use them with className property:
<main className={styles.main + " " + textFont.className}>
<h1 className={titleFont.className}>Home Page</h1>
<p>Hi this is the home page.</p>
</main>
You can do the same thing with local fonts. Just import them in fonts.js and then export their loader functions.
Using variable names like textFont and titleFont helps in forming a uniform system.
You can use the font with other styling classes by simply adding a space in between like this:
{styles.main + " " + textFont.className}
Read documentation here.

Answer 2

In short, I try this method where i can use multiple fonts on my code and apply css on it also without any problem.
Here is my code :
//app/page.js
import Image from 'next/image'
import { Poppins} from '#next/font/google'
import { Anton} from '#next/font/google'
import styles from './page.module.css'
const poppins = Poppins({ weight: '400', subsets: ['latin'] })
const anton = Anton({ weight: '400', subsets: ['latin'] })
export default function Home() {
return (
<main className={styles.main}>
<div >
<h1 className={styles.heading}><span className={anton.className}> Hello </span></h1>
</div>
<div >
<h2 className={styles.heading}><span className={poppins.className}> Hello </span></h2>
</div>
</main>
)
}
You see i use heading and apply styles on it and after that i can use span in inside the heading tag and apply the fonts that i want to use