new·Earn with mozg — 20% of every monthSend somebody here and take a fifth of every plan payment they make, for as long as they keep paying — not a bounty on the first invoice. Your handle is the link, the window is thirty days, and the commission lands on your balance the second they pay. Free to join: if you have signed in, you already have the link. mozg.sh/earnall news →
mozg.beta
Sign in

Next.js · API reference · all subjects

font configuration & application

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

Variable fonts recommended for Google fonts

Variable fonts are recommended for the best performance and flexibility. If a variable font cannot be used, a specific weight must be specified.

Import and apply local fonts with localFont

Import the localFont function from next/font/local and specify the src of the local font file. The path is resolved relative to the file where localFont is called.

Local fonts storage locations

Local fonts can be stored anywhere in the project, including the public folder or co-located inside the app folder in App Router, or inside the pages folder in Pages Router.

Local fonts example with App Router

Example: import localFont from 'next/font/local'; const myFont = localFont({ src: './my-font.woff2' }); then apply myFont.className to html element in root layout.

next/font module usage overview

The next/font module automatically optimizes fonts and removes external network requests. It includes built-in self-hosting for any font file and allows optimal loading of web fonts with no layout shift.

Import and apply Google fonts from next/font/google

Import a Google font directly from next/font/google, call it as a function with options like subsets, and apply the returned className to an HTML element.

Google fonts example: Geist with App Router

Example: import { Geist } from 'next/font/google'; const geist = Geist({ subsets: ['latin'] }); then apply geist.className to html element in root layout.

Google fonts example: Roboto with weight parameter

Example: import { Roboto } from 'next/font/google'; const roboto = Roboto({ weight: '400', subsets: ['latin'] }); then apply roboto.className to html element.

Font scoping in Next.js

Fonts are scoped to the component they are used in. To apply a font to the entire application, add it to the Root Layout.

Multiple font files for single font family with localFont

The src parameter of localFont can be an array of objects. Each object specifies path, weight, and style properties. For example: src: [{ path: './Roboto-Regular.woff2', weight: '400', style: 'normal' }, { path: './Roboto-Bold.woff2', weight: '700', style: 'normal' }].

Google fonts auto self-hosting

Google fonts are automatically self-hosted and included as static assets served from the same domain as the deployment. No requests are sent to Google by the browser when the user visits the site.

Give your agent this brain