როგორ ოპტიმიზირებს next/font შრიფტებს?

Question

Accepted Answer

`next/font` ავტომატურად ოპტიმიზირებს ვებ-შრიფტებს სამუშაო ტესტის გაუმჯობესებისა და განაწილების დაძრავის აღმოფხვრის მიზნით — შრიფტებს თვითი ჰოსტით ინახავს build დროს და ატვირთვის დეტალებს თქვენთვის მართავს. ## 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} ); } ``` ## რა ხდება ავტომატურად - **Self-hosting** — build დროს, Next ჩამოტვირთავს Google შრიფტს და თქვენი დომენიდან მიამაგრებს. Google სერვერებზე runtime შეკითხვის გარეშე → უფრო სწრაფი და თქვენი კონფიდენციალურობის უკეთ დაცვა (მესამე მხარის მეთვალყურე არ არის). - **განაწილების დაძრავის გარეშე** — ითვლის fallback შრიფტის მეტრიკას, რათა მიუახლოვდეს ვებ-შრიფტს, ამიტომ როდესაც რეალური შრიფტი ჩანაცვლდება, ტექსტი არ ახტება (CLS დაცული). - **Preloading და subsetting** — ჩამოტვირთავს შრიფტს და მხოლოდ განსაზღვრული სიმბოლოების ქვეჯგუფს ჩასვავს, რაც ჩამოტვირთვას სმარტ ხდის. - **Render-blocking შეკითხვის გარეშე** — შრიფტები თქვენი build-ის ნაწილია, არა გარე ბლოკირების ამოთხოვნა. ## ლოკალური შრიფტები ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## რატომ არის მნიშვნელოვანი შრიფტების ოპტიმიზაცია შრიფტები კლასიკური საკითხია სამუშაო ტესტისა და CLS-ის თვალსაზრისით: მესამე მხარის ხანგრძლივი თხოვნა, რომელიც აკრძალავს ტექსტის რენდერირებას, შემდეგ კი იწვევს განაწილების დაძრავას, როდესაც შრიფტი ჩაიტვირთება (FOUT/FOIT). ამის კარგად გაკეთება ხელით საჭიროებს `@font-face`-ს, `font-display`-ს, preloading-ს და fallback-metric matching-ს. ## რატომ არის მნიშვნელოვანი `next/font` ავტომატიზირებს შრიფტების სამუშაო ტესტის მთელ სიის გადამოწმებას — self-hosting (სიჩქარე + კონფიდენციალურობა), subsetting და preloading (პატარა, უფრო სწრაფი) და fallback metric matching (განაწილების დაძრავის გარეშე) — ერთი import-ის მიღმა. ეს ამოღებს რთულ და ადვილად შეცდომის დაშვების ოპტიმიზაციას და არის რეკომენდირებული გზა Google-ის და ლოკალური შრიფტების გამოყენებისთვის Next.js-ში.