`next/font` can expose an optimized font through either a generated class name or a [CSS](/courses/css) variable. This makes it easy to integrate [Next.js](/courses/nextjs) fonts with global [CSS](/courses/css), CSS Modules, or [Tailwind CSS](/courses/tailwindcss). The detailed loading and optimization behavior of `next/font` belongs to font optimization. From a styling perspective, the important question is how the generated font is applied to your design system. ### Apply a Font with className ```tsx import { Geist } from 'next/font/google'; const geist = Geist({ subsets: ['latin'] }); export default function RootLayout({ children }) { return ( {children} ); } ``` Now the font becomes the default font for the body subtree. ### Use a CSS Variable A more flexible approach is: ```tsx import { Geist, Geist_Mono } from 'next/font/google'; const geist = Geist({ subsets: ['latin'], variable: '--font-geist' }); const geistMono = Geist_Mono({ subsets: ['latin'], variable: '--font-geist-mono' }); ``` Apply both variables: ```tsx export default function RootLayout({ children }) { return ( {children} ); } ``` ### Use Them in CSS ```css body { font-family: var(--font-geist), sans-serif; } code, pre { font-family: var(--font-geist-mono), monospace; } ``` ### Use Font Variables with Tailwind The same CSS variables can become part of your [Tailwind](/courses/tailwindcss)-based design system. For example, your global styling can map font utilities to the generated variables so components can use semantic font classes. Conceptually: ```text next/font → --font-geist → styling system → font-sans utility ``` Then components can remain clean: ```tsx

...

``` and code areas can use a monospace utility. ### Why Use CSS Variables? They are useful when: - several fonts are used - CSS Modules need access to fonts - Tailwind needs semantic font tokens - a design system separates typography from font loading ### Avoid Importing the Same Font Repeatedly Create fonts once in a shared module: ```text app/fonts.ts ``` and reuse the exported font objects. ### Interview-Ready Answer `next/font` can apply a generated `className` directly or expose the loaded font through a CSS custom property using the `variable` option. CSS variables are particularly useful when integrating optimized fonts with global CSS, CSS Modules, Tailwind utilities, or a broader design system.