Fonts

## 1. Learning Objectives By the end of this lesson, you will be able to load optimized fonts with `next/font`, use local fonts, define CSS variables, and reduce font-related layout shift. Difficulty: Beginner. ## 2. Prerequisites - CSS font basics. - Root layouts. - Performance basics. ## 3. Overview Next.js font optimization helps load fonts efficiently and reduce layout shift. The `next/font` package can self-host supported Google fonts or load local font files with generated CSS. ## 4. Why This Topic Matters Fonts can block rendering, shift text, and add extra network requests. Optimized font loading improves perceived speed and visual stability. ## 5. Real-World Analogy Font optimization is like stocking the exact typeface in your print shop before opening. Customers do not wait while you run across town to find the letters. ## 6. Core Concepts | Concept | Meaning | |---|---| | `next/font` | Next.js font loading package. | | Self-hosting | Serving font files from your app build output. | | CSS variable | Custom property connected to a font family. | | Fallback | Backup font used before custom font is ready. | | Layout shift | Text movement caused by font metric differences. | ## 7. Syntax & API Reference

## 8. Visual Diagram

## 9. Live Example - Full Working Code

What just happened? A local font is loaded through the framework and exposed through a CSS variable. ## 10. Interactive Playground Try this: - Add a Google font through `next/font/google`. - Add a local font through `next/font/local`. - Apply the font variable in global CSS. ## 11. Common Mistakes | Mistake | Why It Happens | Correct Approach | |---|---|---| | Loading fonts with random `` tags | Familiar from plain HTML. | Use `next/font` when possible. | | Loading too many weights | Design exploration goes unchecked. | Load only weights/styles used. | | Applying font variable in wrong place | Layout structure is misunderstood. | Put variables high enough, often on ``. | ## 12. Best Practices - Use `next/font` for app fonts. - Load only necessary weights and subsets. - Prefer `woff2` for local fonts. - Use CSS variables for design systems. - Test layout shift and fallback behavior. ## 13. Browser Compatibility | Feature | Browser Impact | Notes | |---|---|---| | `woff2` | Broad modern support | Preferred font format. | | CSS variables | Broad modern support | Useful for theme tokens. | | Font fallback | Standard CSS | Always define sane fallbacks. | ## 14. Interview Questions **Easy:** What package optimizes fonts in Next.js? Answer: `next/font`. **Medium:** Why limit font weights? Answer: Each weight can add bytes and loading cost. **Hard:** Why do font metrics matter? Answer: Different fallback and final font metrics can move text and cause layout shift. ## 15. Debugging Exercise Bug report: "The site flashes text and shifts when the font loads." Solution Use `next/font`, reduce weights, ensure fallback metrics are handled, and apply the font class/variable consistently at layout level. ## 16. Practice Exercises - Easy: Add a Google font. - Medium: Add a local font and CSS variable. - Hard: Audit a page and remove unused font weights. ## 17. Scenario-Based Challenge A brand page loads five font families and nine weights. What should change? Walkthrough Reduce families and weights to the actual design system, use `next/font`, and verify layout stability and network cost. ## 18. Quick Quiz 1. Font package? Answer: `next/font`. 2. Preferred local format? Answer: `woff2`. 3. Should every weight be loaded? Answer: No. 4. Where often place font variables? Answer: Root layout. 5. What metric can font swaps hurt? Answer: CLS. ## 19. Summary & Key Takeaways - Fonts affect performance and visual stability. - `next/font` provides optimized loading. - Load only needed subsets and weights. - Use CSS variables for consistent typography. - Test for layout shift. ## 20. Cheat Sheet | Need | Tool | |---|---| | Google font | `next/font/google` | | Local font | `next/font/local` | | Design token | `variable` | | Reduce bytes | Fewer weights/subsets | | Stable text | Good fallback metrics | ## 21. Further Reading - Next.js Docs: Font Optimization. - Next.js API Reference: Font. - web.dev: Optimize web fonts. ## 22. Next Lesson Preview Next, you will learn lazy loading for components and libraries.