next/font

25 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Using fonts with Tailwind CSS v4

For Tailwind CSS v4, add CSS variables to your global.css file: ```css @import 'tailwindcss'; @theme inline { --font-sans: var(--font-inter); --font-mono: var(--font-roboto-mono); } ```

next/font overview and benefits

The next/font module automatically optimizes fonts including custom fonts and removes external network requests for improved privacy and performance. It includes built-in automatic self-hosting for any font file, enabling optimal loading of web fonts with no layout shift. Google Fonts are automatically downloaded at build time and self-hosted with static assets, with no requests sent to Google by the browser.

next/font/google import and basic usage

Import a Google font from next/font/google as a function, such as `import { Inter } from 'next/font/google'`. Call the function with configuration options like subsets and display. Access the generated className property to apply the font, for example: `const inter = Inter({ subsets: ['latin'], display: 'swap' })` and then use `className={inter.className}` on an HTML element.

next/font/local import and usage

Import next/font/local as a default import: `import localFont from 'next/font/local'`. Call it with a src option pointing to local font files. Font files can be colocated inside the app directory. Access the generated className property to apply the font, for example: `const myFont = localFont({ src: './my-font.woff2', display: 'swap' })` and then use `className={myFont.className}`.

Font configuration parameters reference table

The font configuration accepts the following parameters: | Parameter | next/font/google | next/font/local | Type | Required | |-----------|------------------|-----------------|------|----------| | src | No | Yes | String or Array of Objects | Yes (local only) | | weight | Yes | Yes | String or Array | Required/Optional | | style | Yes | Yes | String or Array | Optional | | subsets | Yes | No | Array of Strings | Optional | | axes | Yes | No | Array of Strings | Optional | | display | Yes | Yes | String | Optional | | preload | Yes | Yes | Boolean | Optional | | fallback | Yes | Yes | Array of Strings | Optional | | adjustFontFallback | Yes | Yes | Boolean or String | Optional | | variable | Yes | Yes | String | Optional | | declarations | No | Yes | Array of Objects | Optional | All parameters are optional unless specified as Required or Required/Optional.

Variable fonts do not require weight parameter

If loading a variable font, you do not need to specify the font weight parameter. Variable fonts include all available weights by default.

Non-variable fonts require weight parameter

If you cannot use a variable font, you must specify a weight parameter in the font configuration.

Font names with multiple words use underscores in imports

Font names with multiple words should use underscores when importing from next/font/google. For example, 'Roboto Mono' should be imported as `import { Roboto_Mono } from 'next/font/google'`.

Multiple weights and styles using array syntax

You can specify multiple weights and/or styles for a font by passing arrays to the weight and style parameters. Example: `const roboto = Roboto({ weight: ['400', '700'], style: ['normal', 'italic'], subsets: ['latin'], display: 'swap' })`.

Font definitions file pattern

Create a font definitions file (e.g., styles/fonts.ts or styles/fonts.js) to centrally define and export font instances. Load fonts in one place and import the related font objects where needed. This ensures each font is hosted as one instance in your application. Example: `export const inter = Inter()`, then import with `import { inter } from '../styles/fonts'`.

Font definitions file example

Example font definitions file at styles/fonts.ts: ```ts import { Inter, Lora, Source_Sans_3 } from 'next/font/google' import localFont from 'next/font/local' const inter = Inter() const lora = Lora() const sourceCodePro400 = Source_Sans_3({ weight: '400' }) const sourceCodePro700 = Source_Sans_3({ weight: '700' }) const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' }) export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes } ```

Local font with multiple files array example

When using multiple files for a single font family with next/font/local, pass an array to the src parameter with objects containing path, weight, and style properties: ```js const roboto = localFont({ src: [ { path: './Roboto-Regular.woff2', weight: '400', style: 'normal', }, { path: './Roboto-Italic.woff2', weight: '400', style: 'italic', }, { path: './Roboto-Bold.woff2', weight: '700', style: 'normal', }, { path: './Roboto-BoldItalic.woff2', weight: '700', style: 'italic', }, ], }) ```

Using fonts with Tailwind CSS and CSS variables

Integrate next/font with Tailwind CSS using CSS variables. Set the variable option on fonts, apply the variable property to the html or body element to include the CSS variables, then configure Tailwind in tailwind.config.js to use the CSS variables in the fontFamily theme. Example configuration: ```js theme: { extend: { fontFamily: { sans: ['var(--font-inter)'], mono: ['var(--font-roboto-mono)'], }, }, } ``` Then use utility classes like `font-sans` and `font-mono` on elements.

Using fonts with Tailwind CSS v3

For Tailwind CSS v3, configure tailwind.config.js to extend the theme with CSS variables: ```js module.exports = { theme: { extend: { fontFamily: { sans: ['var(--font-inter)'], mono: ['var(--font-roboto-mono)'], }, }, }, } ```

Multiple fonts recommendation

Use multiple fonts conservatively since each new font is an additional resource the client has to download.

next/font version history

Version v13.2.0: @next/font renamed to next/font with installation no longer required. Version v13.0.0: @next/font was added.

Google Fonts app layout example with Inter

Example of using Inter Google Font in app/layout.tsx: ```tsx import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'], display: 'swap', }) export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en" className={inter.className}> <body>{children}</body> </html> ) } ```

Google Fonts with specific weight example

Example of using Roboto Google Font with specific weight in app/layout.tsx: ```tsx import { Roboto } from 'next/font/google' const roboto = Roboto({ weight: '400', subsets: ['latin'], display: 'swap', }) export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en" className={roboto.className}> <body>{children}</body> </html> ) } ```

Local font basic example

Example of using a local font in app/layout.tsx: ```tsx import localFont from 'next/font/local' const myFont = localFont({ src: './my-font.woff2', display: 'swap', }) export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en" className={myFont.className}> <body>{children}</body> </html> ) } ```

Multiple fonts with utility function pattern

To use multiple fonts in your application, create a utility function that exports fonts. First, create styles/fonts.ts with font exports, then import these fonts in layout.tsx and apply them appropriately. This ensures fonts are preloaded only when rendered and each font is hosted as one instance.

Multiple fonts with CSS variable pattern

Alternatively, use CSS variables for multiple fonts. Define fonts with the variable option (e.g., `variable: '--font-inter'`), apply multiple variable classNames to the html element, then use the CSS variables in external CSS files to style different elements.

Multiple fonts CSS variable example

Example using multiple fonts with CSS variables in app/layout.tsx: ```tsx import { Inter, Roboto_Mono } from 'next/font/google' const inter = Inter({ subsets: ['latin'], variable: '--font-inter', display: 'swap', }) const roboto_mono = Roboto_Mono({ subsets: ['latin'], variable: '--font-roboto-mono', display: 'swap', }) export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}> <body> <h1>My App</h1> <div>{children}</div> </body> </html> ) } ``` Then in app/global.css: ```css html { font-family: var(--font-inter); } h1 { font-family: var(--font-roboto-mono); } ```

Tailwind CSS with Roboto_Mono import statement

When importing Roboto_Mono from next/font/google for use with Tailwind CSS, use the underscore naming convention: `import { Roboto_Mono } from 'next/font/google'` (not Roboto Mono with a space).

Tailwind CSS integration with antialiased class

When using next/font with Tailwind CSS, you can add the 'antialiased' Tailwind utility class alongside font variable classNames on the html element to improve font rendering, for example: `className={`${inter.variable} ${roboto_mono.variable} antialiased`}`.

Using tsconfig path alias for fonts

Define a path alias in tsconfig.json to easily access font definitions from anywhere in the project: ```json { "compilerOptions": { "paths": { "@/fonts": ["./styles/fonts"] } } } ``` Then import fonts with: `import { greatVibes, sourceCodePro400 } from '@/fonts'`.

Give your agent this brain