Πώς η 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 και τη χρησιμοποιεί από το **δικό σας** domain. Κανένα αίτημα στους διακομιστές της Google κατά την εκτέλεση → ταχύτερο και καλύτερο για το απόρρητο (χωρίς παρακολούθηση τρίτων). - **Μηδέν μετατόπιση διάταξης** — υπολογίζει τις μετρήσεις της γραμματοσειράς εφεδρείας ώστε να ταιριάζουν με τη γραμματοσειρά ιστού, οπότε όταν εναλλάσσεται το πραγματικό font, το κείμενο δεν πηδά (προστατεύει το CLS). - **Προφόρτωση και υποσύνολα** — προφορτώνει τη γραμματοσειρά και περιλαμβάνει μόνο τα καθορισμένα υποσύνολα χαρακτήρων, μικραίνοντας τη λήψη. - **Χωρίς αίτημα που μπλοκάρει την απόδοση** — οι γραμματοσειρές είναι μέρος της κατασκευής σας, όχι ένα μπλοκαρισμένο εξωτερικό fetch. ## Τοπικές γραμματοσειρές ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Γιατί η βελτιστοποίηση γραμματοσειρών έχει σημασία Oι γραμματοσειρές είναι ένα κλασικό πρόβλημα απόδοσης και CLS: μια ανάκτηση τρίτου μέρους που μπλοκάρει την απόδοση κειμένου, και στη συνέχεια προκαλεί ένα άλμα διάταξης όταν φορτώνεται η γραμματοσειρά (FOUT/FOIT). Η σωστή χειροκίνητη εκτέλεση απαιτεί `@font-face`, `font-display`, προφόρτωση και αντιστοίχιση μετρήσεων εφεδρείας. ## Γιατί έχει σημασία Η `next/font` αυτοματοποιεί ολόκληρη τη λίστα ελέγχου της απόδοσης γραμματοσειρών — αυτοσύνδεση (ταχύτητα + απόρρητο), υποσύνολα και προφόρτωση (μικρότερο, ταχύτερο) και αντιστοίχιση μετρήσεων εφεδρείας (χωρίς μετατόπιση διάταξης) — πίσω από μία εισαγωγή. Αφαιρεί μια δύσκολη, εύκολη στο λάθος βελτιστοποίηση και είναι ο συνιστώμενος τρόπος χρήσης τόσο γραμματοσειρών Google όσο και τοπικών γραμματοσειρών στο Next.js.