ReviseAlgo Logo

Performance

Fonts

Learn Next.js font optimization with next/font, local and Google fonts, CSS variables, and layout-shift-safe typography.

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

    ConceptMeaning
    next/fontNext.js font loading package.
    Self-hostingServing font files from your app build output.
    CSS variableCustom property connected to a font family.
    FallbackBackup font used before custom font is ready.
    Layout shiftText 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

    MistakeWhy It HappensCorrect Approach
    Loading fonts with random tagsFamiliar from plain HTML.Use next/font when possible.
    Loading too many weightsDesign exploration goes unchecked.Load only weights/styles used.
    Applying font variable in wrong placeLayout 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

    FeatureBrowser ImpactNotes
    woff2Broad modern supportPreferred font format.
    CSS variablesBroad modern supportUseful for theme tokens.
    Font fallbackStandard CSSAlways 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

    NeedTool
    Google fontnext/font/google
    Local fontnext/font/local
    Design tokenvariable
    Reduce bytesFewer weights/subsets
    Stable textGood 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.