How next/font Really Works 🚀 Better UX & Faster Pages #15 || Next.js Anatomy || DeathCode - DeathCode

🔤 Next.js 16 Font Optimization Deep Dive

FOIT, FOUT, next/font, Self-Hosting & Rendering Internals

Overview

Fonts web design ka important part hain, lekin font loading sirf visual design ka topic nahi hai.

Font loading directly affect karta hai:

  • Performance
  • User Experience (UX)
  • Core Web Vitals
  • Perceived Speed
  • Accessibility

Kai baar page technically fast load ho jata hai, lekin font loading ki wajah se user ko site slow feel hoti hai.

Isi problem ko solve karne ke liye Next.js next/font system provide karta hai.

Fonts Actually Kaise Work Karte Hain?

Browser ke paas har font available nahi hota.

Agar aap use karte ho:

  • Inter
  • Poppins
  • Roboto
  • Open Sans
  • Geist

To browser ko font file download karni padti hai.

Example:

font-family: "Inter";

Browser ka simplified workflow:

HTML
  ↓
CSS Parse
  ↓
Font Discovery
  ↓
Font Download
  ↓
Text Render

Yahin se ek important question aata hai:

Font download hone tak text ka kya hoga?

Isi question ka answer hai FOIT aur FOUT.

The Font Rendering Problem

Suppose browser ne text discover kar liya.

Lekin required font abhi download nahi hui.

Browser ke paas do options hain:

Option 1

Wait karo.

Option 2

Temporary fallback font dikhao.

In dono approaches ke naam hain:

  • FOIT
  • FOUT

FOIT (Flash Of Invisible Text)

FOIT ka full form hai:

Flash Of Invisible Text

Behaviour

Browser decide karta hai:

Jab tak font download nahi hota, text mat dikhao.

Result:

Page Loaded
      ↓
Text Hidden
      ↓
Font Download
      ↓
Text Visible

User Experience

User dekhta hai:

❌ Blank text area

❌ Empty headings

❌ Lag feeling

❌ Slow website impression

Example

Suppose page mein heading hai:

<h1>Next.js Mastery</h1>

Font download hone tak:

Nothing Visible

User ko lag sakta hai ki page abhi load hi nahi hua.

FOUT (Flash Of Unstyled Text)

FOUT ka full form hai:

Flash Of Unstyled Text

Behaviour

Browser decide karta hai:

Wait mat karo. Pehle fallback font dikhao.

Flow:

Fallback Font
      ↓
Font Download
      ↓
Font Swap

User Experience

✅ Text immediately visible

✅ Faster perceived performance

❌ Slight visual change possible

Example

Initial Render:

Arial

Font Loaded:

Inter

User ko font change dikh sakta hai.

FOIT vs FOUT

Feature FOIT FOUT
Text Visibility Hidden Visible
Perceived Speed Slow Fast
UX Poor Better
Layout Stability Better Slight shift possible
User Preference Rarely preferred Usually preferred

Mental Model

Restaurant Analogy:

FOIT

Customer ko tab tak kuch nahi diya jata jab tak complete meal ready na ho.

Wait
      ↓
Food

FOUT

Customer ko pehle starter de diya jata hai.

Main course baad mein aata hai.

Starter
      ↓
Main Course

Most users FOUT ko FOIT se zyada prefer karte hain.

Traditional Font Loading

Historically fonts usually load hote the:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/..."
>

Internal Flow

HTML
  ↓
CSS
  ↓
Google Fonts CSS
  ↓
Font Files
  ↓
Render

Problems

Extra Network Requests

Browser ko additional CSS request karni padti hai.

Third-Party Dependency

Rendering Google Fonts infrastructure par depend karti hai.

Longer Critical Path

Font render hone se pehle zyada steps complete karne padte hain.

Why next/font Exists

Next.js ne font loading ko optimize karne ke liye dedicated system introduce kiya:

import { Inter } from "next/font/google";

Goal:

Font loading ko automatic aur optimized banana.

Basic Usage

import { Inter } from "next/font/google";
 
const inter = Inter({
  subsets: ["latin"],
});
 
export default function RootLayout({
  children,
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {children}
      </body>
    </html>
  );
}

Surface par lagta hai:

Font Class Applied

Lekin internally kaafi optimization hoti hai.

What Happens Internally?

Build process ke dauran Next.js font configuration analyze karta hai.

Step 1: Font Discovery

Build Start
      ↓
Inter Font Found

Step 2: Font Asset Collection

Required font files identify ki jati hain.

Regular
Medium
Bold

sirf wahi files include hoti hain jo actually use ho rahi hain.

Step 3: Self Hosting

Font files application ke saath host ki jati hain.

Step 4: Automatic Preload

Critical fonts preload ki ja sakti hain.

Step 5: Optimized CSS Generation

Next.js optimized font CSS generate karta hai.

Self Hosting Explained

Traditional approach:

Browser
    ↓
Google Fonts
    ↓
Font File

next/font approach:

Browser
    ↓
Your Application
    ↓
Font File

Benefits

Better Privacy

Google Fonts requests avoid ho sakti hain.

Fewer External Dependencies

Third-party request chain reduce hoti hai.

Better Performance

Network hops kam ho jate hain.

Better Reliability

External service failures ka impact kam hota hai.

Font Preloading

Preload browser ko early hint deta hai.

Example:

Ye resource important hai.
Isko jaldi download karo.

Without Preload

HTML
  ↓
CSS
  ↓
Font Discovery
  ↓
Download

With Preload

HTML
  ↓
Preload Trigger
  ↓
Download Starts Early

Result

Faster text rendering.

display: swap

Font loading strategy ka important concept.

Swap Behaviour

Fallback Font
      ↓
Real Font

Benefits

✅ Immediate text visibility

✅ Better perceived performance

Drawback

❌ Minor visual change possible

Why It Is Preferred

Most users:

  • Invisible text pasand nahi karte
  • Slight font change tolerate kar lete hain

Isi wajah se modern web generally swap strategy prefer karta hai.

Font Loading and UX

Font loading directly influence karta hai:

Readability

Text kitni jaldi readable hoti hai.

Perceived Performance

Site kitni fast feel hoti hai.

User Trust

Blank content users ko site slow lagne lagti hai.

Important Observation

Actual performance aur perceived performance alag cheezein hain.

Example:

Actual Load Time
      ↓
2 Seconds

Lekin agar text immediately visible ho:

Feels Fast

Production Thinking

Font optimization sirf technical topic nahi hai.

Design decisions bhi performance ko affect karte hain.

Bad Example

10 Font Families

Har font:

  • More requests
  • More files
  • More rendering work

Better Approach

Inter

or

Geist

Usually enough.

Font Weights Matter

Ye bhi common mistake hai.

Example:

100
200
300
400
500
600
700
800
900

Har weight extra font data add kar sakta hai.

Better Strategy

Sirf required weights use karo.

Example:

400
700

Variable Fonts

Modern font systems variable fonts support karte hain.

Instead of:

Multiple Font Files

Use:

Single Variable Font

Benefits

  • Smaller payload
  • Better flexibility
  • Easier management

Geist aur Inter variable font support provide karte hain.

Best Practices

Use next/font

Preferred approach.

Limit Font Families

Kam families = better performance.

Limit Font Weights

Sirf required weights load karo.

Prefer Variable Fonts

Where available.

Let Next.js Handle Preloading

Manual optimization ki zarurat kam padti hai.

Always Define Fallback Fonts

Example:

font-family:
  "Inter",
  Arial,
  sans-serif;

Common Mistakes

Multiple Font Families

Unnecessary downloads.

Loading Every Weight

Payload increase.

Optimization benefits lose ho jate hain.

Ignoring Lighthouse Warnings

Font issues often directly performance scores ko impact karte hain.

Mixing Too Many Design Fonts

Visual inconsistency + performance cost.

Final Mental Model

Fonts sirf design asset nahi hain.

Fonts rendering assets hain.

FOIT

Invisible Text

FOUT

Visible Fallback Text

next/font

Automatically manage karta hai:

Font Discovery
        ↓
Self Hosting
        ↓
Preloading
        ↓
Optimized CSS
        ↓
Faster Rendering

Golden Rule

Users font ko notice nahi karte jab sab kuch sahi kaam karta hai.

Lekin users immediately notice karte hain jab text late render ho, invisible ho, ya page slow feel ho.

Isi liye font optimization design concern se zyada performance concern hai.

© 2024 DeathCode. All Rights Reserved.