next/font వెబ్ ఫాంట్లను స్వయంచాలకంగా ఆప్టిమైజ్ చేస్తుంది, పనితీరును మెరుగుపరచడానికి మరియు లేఅవుట్ స్థానభ్రంశం తొలగించడానికి — నిర్మాణ సమయంలో ఫాంట్లను స్వయం-హోస్ట్ చేసి, లోడింగ్ వివరాలను మీ కోసం నిర్వహిస్తుంది.
{ } ;
inter = ({
: [],
: ,
});
() {
(
);
}
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 మరియు స్థానిక ఫాంట్లు రెండింటినీ ఉపయోగించేందుకు సిఫారసు చేయబడిన మార్గం.