Next.js
/Advanced
Font Optimization
Definition
The technical configuration of local fonts, variable fonts, and preloading to squeeze every millisecond of performance out of typography.
Explain Like I'm New
If you bought an expensive custom `.woff2` font file from a designer, you don't use Google Fonts. You use `next/font/local`. You tell Next.js where the file is, and it handles all the complex CSS `@font-face` declarations and preloading automatically.
Real World Example
A corporate brand that uses a proprietary font like 'Circular' or 'Helvetica Neue'. They upload the raw font files to the codebase and use `next/font/local` to apply them securely.
Common Use Cases
- •Premium branding
- •Variable fonts
- •Advanced typography
Interactive Example
Interview Questions
basic
- If you have a custom font file downloaded on your computer, which import do you use: `next/font/google` or `next/font/local`?
intermediate
- What is a 'Variable Font' and why is it vastly superior for performance?