🔤
Styling & Optimization

Font Optimization

next/font
💡 next/font, EK, "LOCAL, TAILOR" jaisa, hai — FONTS, ko, BUILD-TIME, PAR, hi, DOWNLOAD, karके, SELF-HOST, kar, deta hai, RUNTIME, PAR, KISI, EXTERNAL, FONT, SERVER, (jaise, Google Fonts CDN) se, REQUEST, karne, ki, ZAROORAT, khatam.

next/font/google, se, GOOGLE, FONTS, IMPORT, kiye, ja, sakte, HAIN — BUILD, TIME, PAR, DOWNLOAD, ho, jaate, HAIN, aur, SELF-HOSTED, ho, jaate, HAIN, EXTRA, NETWORK, REQUEST, (Google, ko) ELIMINATE, karте, hue.

Ye, APPROACH, "Layout, Shift" (font, load, hone, se, PEHLE/BAAD, text, ka, "JUMP" karna) PREVENT, karta hai, aur, PRIVACY, bhi, IMPROVE, karta hai (koi, THIRD-PARTY, REQUEST, USER, ke, BROWSER, se, NAHI, jaati).

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

const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}
🔤
next/font, EK, "LOCAL, TAILOR" jaisa, hai — FONTS, ko, BUILD-TIME, PAR, hi, DOWNLOAD, karके, SELF-HOST, kar, deta hai, RUNTIME, PAR, KISI, EXTERNAL, FONT, SERVER, (jaise, Google Fonts CDN) se, REQUEST, karne, ki, ZAROORAT, khatam.
1 / 2
⚡ Quick Recap
  • next/font/google = fonts, ko, build-time, PAR, download, karके, self-host, karta, hai
  • Extra, network, request, (Google, ko) ELIMINATE, hoti, hai
  • Layout shift, PREVENT, karta, hai aur, privacy, IMPROVE, karta, hai
Is page mein (2 subtopics)

next/font, VARIABLE, fonts, ko, EFFICIENTLY, HANDLE, karta hai — EK, single, font, file, mein, MULTIPLE, weights/styles, HOTE, HAIN, alag-alag, files, download, karne, ki, ZAROORAT, ke, bina.

const inter = Inter({ subsets: ["latin"], weight: ["400", "700"] });

next/font/local, SELF-HOSTED, CUSTOM, fonts, (jaise, EK, COMPANY, ka, PROPRIETARY, font) ke, liye, USE, hota hai — SAME, OPTIMIZATION, BENEFITS, (build-time, download, layout, shift, prevention) deta, hai, jaise, Google, Fonts, ke, liye.