next/font ਫੋਂਟਾਂ ਨੂੰ ਕਿਵੇਂ ਅਨੁਕੂਲ ਕਰਦਾ ਹੈ?

Question

Accepted Answer

`next/font` ਵਿਆਪਕ ਫੋਂਟਾਂ ਨੂੰ ਸਵੈ-ਚਾਲਿਤ ਢੰਗ ਨਾਲ ਅਨੁਕੂਲ ਕਰਦਾ ਹੈ ਅਤੇ ਕਾਰਗੁਜ਼ਾਰੀ ਵਿੱਚ ਬਾਧਾਵਾਂ ਨੂੰ ਦੂਰ ਕਰਦਾ ਹੈ — ਨਿਰਮਾਣ ਸਮੇਂ ਫੋਂਟਾਂ ਨੂੰ ਖੁਦ-ਹੋਸਟ ਕਰ ਕੇ ਅਤੇ ਲੋਡਿੰਗ ਦੀਆਂ ਗਿਣਤੀਆਂ ਨੂੰ ਸਾਂਭਲ ਕੇ। ## Google ਫੋਂਟ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ```tsx // app/layout.tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], // only load the character sets you need (smaller files) display: "swap", // show fallback text immediately, swap when font loads }); export default function RootLayout({ children }) { return ( {/* apply the font */} {children} ); } ``` ## ਇਹ ਸਵੈ-ਚਾਲਿਤ ਢੰਗ ਨਾਲ ਕੀ ਕਰਦਾ ਹੈ - **ਸਵੈ-ਹੋਸਟਿੰਗ** — ਨਿਰਮਾਣ ਸਮੇਂ, Next ਗੂਗਲ ਫੋਂਟ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰਦਾ ਹੈ ਅਤੇ **ਆਪਣੀ** ਡੋਮੇਨ ਤੋਂ ਭੇਜਦਾ ਹੈ। ਰਨਟਾਈਮ ਤੋਂ Google ਦੇ ਸਰਵਰ ਨਾ ਬੁਲਾਵੋ → ਤਿੱਖਾ ਅਤੇ ਗੋਪਨੀਯਤਾ ਲਈ ਬਿਹਤਰ (ਕੋਈ ਤੀਜੀ-ਧਿਰ ਟ੍ਰੈਕਿੰਗ ਨਹੀਂ)। - **ਜ਼ੀਰੋ ਲੇਅ-ਆਉਟ ਸ਼ਿਫਟ** — ਇਹ ਫੇਲਬੈਕ ਫੋਂਟ ਦੀ ਮੀਟ੍ਰਿਕਸ ਦੀ ਗਣਨਾ ਕਰਦਾ ਹੈ ਵਿਆਪਕ ਫੋਂਟ ਨਾਲ ਮਿਲਾਉਣ ਲਈ, ਤਾਂ ਜੋ ਜਦੋਂ ਅਸਲੀ ਫੋਂਟ ਬਦਲ ਜਾਵੇ ਤਾਂ ਲਿਖਤ ਛਾਲ ਨਹੀਂ ਮਾਰੇ (CLS ਸੁਰੱਖਿਆ)। - **ਪੂਰਵ-ਲੋਡਿੰਗ ਅਤੇ ਸਬਸੈਟਿੰਗ** — ਫੋਂਟ ਨੂੰ ਪੂਰਵ-ਲੋਡ ਕਰਦਾ ਹੈ ਅਤੇ ਸਿਰਫ ਨਿਰਧਾਰਿਤ ਅੱਖਰ ਸਬਸੈਟ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ, ਡਾਊਨਲੋਡ ਨੂੰ ਛੋਟਾ ਕਰਦਾ ਹੈ। - **ਕੋਈ ਰੈਂਡਰ-ਬਲਾਕਿੰਗ ਬੇਨਤੀ ਨਹੀਂ** — ਫੋਂਟ ਤੁਹਾਡੇ ਬਿਲਡ ਦਾ ਹਿੱਸਾ ਹੁੰਦੇ ਹਨ, ਬਾਹਰੀ ਫੈਚ ਨਹੀਂ। ## ਸਥਾਨਕ ਫੋਂਟ ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## ਫੋਂਟ ਅਨੁਕੂਲਨ ਕਿਉਂ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ ਫੋਂਟ ਇੱਕ ਸ਼ਾਨਦਾਰ ਕਾਰਗੁਜ਼ਾਰੀ ਅਤੇ CLS ਸਮੱਸਿਆ ਹਨ: ਇੱਕ ਤੀਜੀ-ਧਿਰ ਫੈਚ ਜੋ ਲਿਖਤ ਰੈਂਡਰਿੰਗ ਨੂੰ ਰੋਕਦਾ ਹੈ, ਫਿਰ ਜਦੋਂ ਫੋਂਟ ਲੋਡ ਹੋ ਜਾਵੇ ਤਾਂ ਲੇਅ-ਆਉਟ ਛਾਲ ਮਾਰਦਾ ਹੈ (FOUT/FOIT)। ਇਹ ਪ੍ਰਕਾਸ਼ਤ ਨਾਲ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕਰਨ ਲਈ `@font-face`, `font-display`, ਪੂਰਵ-ਲੋਡਿੰਗ, ਅਤੇ ਫੇਲਬੈਕ-ਮੀਟ੍ਰਿਕ ਮਿਲਾਉ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ## ਇਹ ਕਿਉਂ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ `next/font` ਸਾਰੀ ਫੋਂਟ-ਕਾਰਗੁਜ਼ਾਰੀ ਚੈਕਲਿਸਟ ਨੂੰ ਸਵੈ-ਚਾਲਿਤ ਕਰਦਾ ਹੈ — ਸਵੈ-ਹੋਸਟਿੰਗ (ਗਤੀ + ਗੋਪਨੀਯਤਾ), ਸਬਸੈਟਿੰਗ ਅਤੇ ਪੂਰਵ-ਲੋਡਿੰਗ (ਛੋਟੇ, ਤਿੱਖਾ), ਅਤੇ ਫੇਲਬੈਕ ਮੀਟ੍ਰਿਕ ਮਿਲਾਉ (ਕੋਈ ਲੇਅ-ਆਉਟ ਸ਼ਿਫਟ ਨਹੀਂ) — ਇੱਕ ਆਯਾਤ ਦੇ ਪਿੱਛੇ। ਇਹ ਇੱਕ ਮੁਸ਼ਕਲ, ਗਲਤ ਹੋਣ ਆਸਾਨ ਅਨੁਕੂਲਨ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ ਅਤੇ Next.js ਵਿੱਚ Google ਅਤੇ ਸਥਾਨਕ ਦੋਵਾਂ ਫੋਂਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਸਿਫਾਰਸ਼ ਕੀਤਾ ਤਰੀਕਾ ਹੈ।