Miten next/font optimoi kirjasintyyppejä?

Question

Accepted Answer

`next/font` optimoi verkkokirjasintyyppejä automaattisesti suorituskyvyn parantamiseksi ja asemoinnin siirtymisen poistamiseksi — isännöimällä kirjasintyyppiä rakennusaikana ja hoitamalla latausdetaljit puolestasi. ## Google-kirjasintyypin käyttö ```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} ); } ``` ## Mitä se tekee automaattisesti - **Oma isännöinti** — rakennusaikana Next lataa Google-kirjasintyypin ja palvelee sitä **omasta** verkkotunnuksestasi. Ei pyyntöjä Googlen palvelimille suoritusaikana → nopeampi ja parempi yksityisyydelle (ei kolmannen osapuolen seurantaa). - **Nolla asemoinnin siirtymää** — laskee varakirjasintyypin mittarit vastaamaan verkkokirjasintyypin kanssa, joten kun todellinen kirjasintyyppi vaihdetaan, teksti ei hyppää (suojelee CLS:ää). - **Ennakkolataus ja osajako** — ennakkolataa kirjasintyypin ja sisältää vain määritellyt merkkiryhmät, mikä pienentää latauksen. - **Ei renderöintiin estävää pyyntöä** — kirjasintyypit ovat osa rakennustasi, eivät estävää ulkoista hakua. ## Paikalliset kirjasintyyppi ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Miksi kirjasintyypin optimointi on tärkeää Kirjasintyyppi ovat perinteinen suorituskyky- ja CLS-ongelma: kolmannen osapuolen haku, joka estää tekstin renderöinnin ja sitten aiheuttaa asemoinnin siirtymisen, kun kirjasintyyppi ladataan (FOUT/FOIT). Oikean tekeminen manuaalisesti vaatii `@font-face`, `font-display`, ennakkolatauksen ja varakirjasintyypin mittareiden yhteensovittamista. ## Miksi sillä on merkitystä `next/font` automatisoi koko kirjasintyypin suorituskyvyn tarkistusluettelon — oma isännöinti (nopeus + yksityisyys), osajako ja ennakkolataus (pienempi, nopeampi) ja varakirjasintyypin mittareiden yhteensovittaminen (ei asemoinnin siirtymää) — yhden tuonnin taakse. Se poistaa hankalaa, helposti väärin tehtävissä olevan optimoinnin ja on suositeltu tapa käyttää sekä Google- että paikallisia kirjasintyyppejä Next.js:ssä.