app/page.tsx import { Inter } from 'next/font/google'
import styles from '../styles/component.module.css'
 
const inter = Inter({
  variable: '--font-inter',
})
To use the font, set the className of the parent container of the text you would like to style to the font loader's variable value and the className of the text to the styles property from the external CSS file.
app/page.tsx <main className={inter.variable}>
  <p className={styles.text}>Hello World</p>
</main>
Define the text selector class in the component.module.css CSS file as follows:
styles/component.module.css .text {
  font-family: var(--font-inter);
  font-weight: 200;
  font-style: italic;
}