Source from repo

Next.js Best Practices

Apply Next.js best practices for RSC boundaries, async APIs, routing, metadata, and optimization.

vercel-labsGitHub vercel-labsOfficialSource repo Original GitHub link Publisher page

Files

Skill

n/a

Size

78.7 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

font.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown246 linesFree

font.md

1# Font Optimization
2 
3Use `next/font` for automatic font optimization with zero layout shift.
4 
5## Google Fonts
6 
7```tsx
8// app/layout.tsx
9import { Inter } from 'next/font/google'
10 
11const inter = Inter({ subsets: ['latin'] })
12 
13export default function RootLayout({ children }: { children: React.ReactNode }) {
14  return (
15    <html lang="en" className={inter.className}>
16      <body>{children}</body>
17    </html>
18  )
19}
20```
21 
22## Multiple Fonts
23 
24```tsx
25import { Inter, Roboto_Mono } from 'next/font/google'
26 
27const inter = Inter({
28  subsets: ['latin'],
29  variable: '--font-inter',
30})
31 
32const robotoMono = Roboto_Mono({
33  subsets: ['latin'],
34  variable: '--font-roboto-mono',
35})
36 
37export default function RootLayout({ children }: { children: React.ReactNode }) {
38  return (
39    <html lang="en" className={`${inter.variable} ${robotoMono.variable}`}>
40      <body>{children}</body>
41    </html>
42  )
43}
44```
45 
46Use in CSS:
47```css
48body {
49  font-family: var(--font-inter);
50}
51 
52code {
53  font-family: var(--font-roboto-mono);
54}
55```
56 
57## Font Weights and Styles
58 
59```tsx
60// Single weight
61const inter = Inter({
62  subsets: ['latin'],
63  weight: '400',
64})
65 
66// Multiple weights
67const inter = Inter({
68  subsets: ['latin'],
69  weight: ['400', '500', '700'],
70})
71 
72// Variable font (recommended) - includes all weights
73const inter = Inter({
74  subsets: ['latin'],
75  // No weight needed - variable fonts support all weights
76})
77 
78// With italic
79const inter = Inter({
80  subsets: ['latin'],
81  style: ['normal', 'italic'],
82})
83```
84 
85## Local Fonts
86 
87```tsx
88import localFont from 'next/font/local'
89 
90const myFont = localFont({
91  src: './fonts/MyFont.woff2',
92})
93 
94// Multiple files for different weights
95const myFont = localFont({
96  src: [
97    {
98      path: './fonts/MyFont-Regular.woff2',
99      weight: '400',
100      style: 'normal',
101    },
102    {
103      path: './fonts/MyFont-Bold.woff2',
104      weight: '700',
105      style: 'normal',
106    },
107  ],
108})
109 
110// Variable font
111const myFont = localFont({
112  src: './fonts/MyFont-Variable.woff2',
113  variable: '--font-my-font',
114})
115```
116 
117## Tailwind CSS Integration
118 
119```tsx
120// app/layout.tsx
121import { Inter } from 'next/font/google'
122 
123const inter = Inter({
124  subsets: ['latin'],
125  variable: '--font-inter',
126})
127 
128export default function RootLayout({ children }) {
129  return (
130    <html lang="en" className={inter.variable}>
131      <body>{children}</body>
132    </html>
133  )
134}
135```
136 
137```js
138// tailwind.config.js
139module.exports = {
140  theme: {
141    extend: {
142      fontFamily: {
143        sans: ['var(--font-inter)'],
144      },
145    },
146  },
147}
148```
149 
150## Preloading Subsets
151 
152Only load needed character subsets:
153 
154```tsx
155// Latin only (most common)
156const inter = Inter({ subsets: ['latin'] })
157 
158// Multiple subsets
159const inter = Inter({ subsets: ['latin', 'latin-ext', 'cyrillic'] })
160```
161 
162## Display Strategy
163 
164Control font loading behavior:
165 
166```tsx
167const inter = Inter({
168  subsets: ['latin'],
169  display: 'swap', // Default - shows fallback, swaps when loaded
170})
171 
172// Options:
173// 'auto' - browser decides
174// 'block' - short block period, then swap
175// 'swap' - immediate fallback, swap when ready (recommended)
176// 'fallback' - short block, short swap, then fallback
177// 'optional' - short block, no swap (use if font is optional)
178```
179 
180## Don't Use Manual Font Links
181 
182Always use `next/font` instead of `<link>` tags for Google Fonts.
183 
184```tsx
185// Bad: Manual link tag (blocks rendering, no optimization)
186<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />
187 
188// Bad: Missing display and preconnect
189<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />
190 
191// Good: Use next/font (self-hosted, zero layout shift)
192import { Inter } from 'next/font/google'
193 
194const inter = Inter({ subsets: ['latin'] })
195```
196 
197## Common Mistakes
198 
199```tsx
200// Bad: Importing font in every component
201// components/Button.tsx
202import { Inter } from 'next/font/google'
203const inter = Inter({ subsets: ['latin'] }) // Creates new instance each time!
204 
205// Good: Import once in layout, use CSS variable
206// app/layout.tsx
207const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
208 
209// Bad: Using @import in CSS (blocks rendering)
210/* globals.css */
211@import url('https://fonts.googleapis.com/css2?family=Inter');
212 
213// Good: Use next/font (self-hosted, no network request)
214import { Inter } from 'next/font/google'
215 
216// Bad: Loading all weights when only using a few
217const inter = Inter({ subsets: ['latin'] }) // Loads all weights
218 
219// Good: Specify only needed weights (for non-variable fonts)
220const inter = Inter({ subsets: ['latin'], weight: ['400', '700'] })
221 
222// Bad: Missing subset - loads all characters
223const inter = Inter({})
224 
225// Good: Always specify subset
226const inter = Inter({ subsets: ['latin'] })
227```
228 
229## Font in Specific Components
230 
231```tsx
232// For component-specific fonts, export from a shared file
233// lib/fonts.ts
234import { Inter, Playfair_Display } from 'next/font/google'
235 
236export const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
237export const playfair = Playfair_Display({ subsets: ['latin'], variable: '--font-playfair' })
238 
239// components/Heading.tsx
240import { playfair } from '@/lib/fonts'
241 
242export function Heading({ children }) {
243  return <h1 className={playfair.className}>{children}</h1>
244}
245```
246

Marketplace

Source from repo

Next.js Best Practices

Apply Next.js best practices for RSC boundaries, async APIs, routing, metadata, and optimization.

vercel-labsGitHub vercel-labsOfficialSource repo Original GitHub link Publisher page

Files

Skill

n/a

Size

78.7 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

font.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown246 linesFree

font.md

1# Font Optimization
2 
3Use `next/font` for automatic font optimization with zero layout shift.
4 
5## Google Fonts
6 
7```tsx
8// app/layout.tsx
9import { Inter } from 'next/font/google'
10 
11const inter = Inter({ subsets: ['latin'] })
12 
13export default function RootLayout({ children }: { children: React.ReactNode }) {
14  return (
15    <html lang="en" className={inter.className}>
16      <body>{children}</body>
17    </html>
18  )
19}
20```
21 
22## Multiple Fonts
23 
24```tsx
25import { Inter, Roboto_Mono } from 'next/font/google'
26 
27const inter = Inter({
28  subsets: ['latin'],
29  variable: '--font-inter',
30})
31 
32const robotoMono = Roboto_Mono({
33  subsets: ['latin'],
34  variable: '--font-roboto-mono',
35})
36 
37export default function RootLayout({ children }: { children: React.ReactNode }) {
38  return (
39    <html lang="en" className={`${inter.variable} ${robotoMono.variable}`}>
40      <body>{children}</body>
41    </html>
42  )
43}
44```
45 
46Use in CSS:
47```css
48body {
49  font-family: var(--font-inter);
50}
51 
52code {
53  font-family: var(--font-roboto-mono);
54}
55```
56 
57## Font Weights and Styles
58 
59```tsx
60// Single weight
61const inter = Inter({
62  subsets: ['latin'],
63  weight: '400',
64})
65 
66// Multiple weights
67const inter = Inter({
68  subsets: ['latin'],
69  weight: ['400', '500', '700'],
70})
71 
72// Variable font (recommended) - includes all weights
73const inter = Inter({
74  subsets: ['latin'],
75  // No weight needed - variable fonts support all weights
76})
77 
78// With italic
79const inter = Inter({
80  subsets: ['latin'],
81  style: ['normal', 'italic'],
82})
83```
84 
85## Local Fonts
86 
87```tsx
88import localFont from 'next/font/local'
89 
90const myFont = localFont({
91  src: './fonts/MyFont.woff2',
92})
93 
94// Multiple files for different weights
95const myFont = localFont({
96  src: [
97    {
98      path: './fonts/MyFont-Regular.woff2',
99      weight: '400',
100      style: 'normal',
101    },
102    {
103      path: './fonts/MyFont-Bold.woff2',
104      weight: '700',
105      style: 'normal',
106    },
107  ],
108})
109 
110// Variable font
111const myFont = localFont({
112  src: './fonts/MyFont-Variable.woff2',
113  variable: '--font-my-font',
114})
115```
116 
117## Tailwind CSS Integration
118 
119```tsx
120// app/layout.tsx
121import { Inter } from 'next/font/google'
122 
123const inter = Inter({
124  subsets: ['latin'],
125  variable: '--font-inter',
126})
127 
128export default function RootLayout({ children }) {
129  return (
130    <html lang="en" className={inter.variable}>
131      <body>{children}</body>
132    </html>
133  )
134}
135```
136 
137```js
138// tailwind.config.js
139module.exports = {
140  theme: {
141    extend: {
142      fontFamily: {
143        sans: ['var(--font-inter)'],
144      },
145    },
146  },
147}
148```
149 
150## Preloading Subsets
151 
152Only load needed character subsets:
153 
154```tsx
155// Latin only (most common)
156const inter = Inter({ subsets: ['latin'] })
157 
158// Multiple subsets
159const inter = Inter({ subsets: ['latin', 'latin-ext', 'cyrillic'] })
160```
161 
162## Display Strategy
163 
164Control font loading behavior:
165 
166```tsx
167const inter = Inter({
168  subsets: ['latin'],
169  display: 'swap', // Default - shows fallback, swaps when loaded
170})
171 
172// Options:
173// 'auto' - browser decides
174// 'block' - short block period, then swap
175// 'swap' - immediate fallback, swap when ready (recommended)
176// 'fallback' - short block, short swap, then fallback
177// 'optional' - short block, no swap (use if font is optional)
178```
179 
180## Don't Use Manual Font Links
181 
182Always use `next/font` instead of `<link>` tags for Google Fonts.
183 
184```tsx
185// Bad: Manual link tag (blocks rendering, no optimization)
186<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />
187 
188// Bad: Missing display and preconnect
189<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />
190 
191// Good: Use next/font (self-hosted, zero layout shift)
192import { Inter } from 'next/font/google'
193 
194const inter = Inter({ subsets: ['latin'] })
195```
196 
197## Common Mistakes
198 
199```tsx
200// Bad: Importing font in every component
201// components/Button.tsx
202import { Inter } from 'next/font/google'
203const inter = Inter({ subsets: ['latin'] }) // Creates new instance each time!
204 
205// Good: Import once in layout, use CSS variable
206// app/layout.tsx
207const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
208 
209// Bad: Using @import in CSS (blocks rendering)
210/* globals.css */
211@import url('https://fonts.googleapis.com/css2?family=Inter');
212 
213// Good: Use next/font (self-hosted, no network request)
214import { Inter } from 'next/font/google'
215 
216// Bad: Loading all weights when only using a few
217const inter = Inter({ subsets: ['latin'] }) // Loads all weights
218 
219// Good: Specify only needed weights (for non-variable fonts)
220const inter = Inter({ subsets: ['latin'], weight: ['400', '700'] })
221 
222// Bad: Missing subset - loads all characters
223const inter = Inter({})
224 
225// Good: Always specify subset
226const inter = Inter({ subsets: ['latin'] })
227```
228 
229## Font in Specific Components
230 
231```tsx
232// For component-specific fonts, export from a shared file
233// lib/fonts.ts
234import { Inter, Playfair_Display } from 'next/font/google'
235 
236export const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
237export const playfair = Playfair_Display({ subsets: ['latin'], variable: '--font-playfair' })
238 
239// components/Heading.tsx
240import { playfair } from '@/lib/fonts'
241 
242export function Heading({ children }) {
243  return <h1 className={playfair.className}>{children}</h1>
244}
245```
246

Next.js Best Practices

font.md

Preparing the source view

Next.js Best Practices

font.md