next/font a dhéanann gréine ar dhóigh dhomhain do chóireála gréine gréine, agus téir ar do riachtanais — má bhíonn na clóchur fé chéile ag am tógála agus a bhainistiú na sonraí uachtar duit.
Clóchur Google a úsáid
// 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 (
<html lang="en" className={inter.className}> {/* apply the font */}
<body>{children}</body>
</html>
);
}
Cad a dhéanann sé go huathoibríoch
- Féin-óstáil — ag am tógála, íosluann Next an Clóchur Google agus fógraíonn sé ó do théarmainn. Gan iarratas ar fhreastalaí Google ag am feidhmithe → níos gasta agus níos fearr do phríobháideacht (gan fianáin tríú páirtí).
- Zéro-ghealadh leagan amach — ríomhann sé méadracht an chló faillí chun a bheith i gcomhthéacs leis an gclóchur gréine, mar sin nuair a bhíonn an fhíor-chlóchur i bhfeidhm, ní léimíonn an téacs (cosnaíonn CLS).
- Réamhuachta & foibhriú — réamhuachtaíonn an clóchur agus cuimsíonn sé na fo-thacair carachtar sonraithe amháin, ag laghdú an íoslódála.
- Gan iarratas blocála-dhéanmhachta — tá na clóchur i gcuid de do thógáil, ní fhiosrúchán toisigh blocála.
Clóchur áitiúil
import localFont from "next/font/local";
const myFont = localFont({ src: "./MyFont.woff2", display: "swap" });
Cén fáth go bhfuil clóchur tábhachtach
Clóchur a bhíonn ina fhadhb fhairsing ar fheidhmíochta agus CLS: fiosrúchán tríú páirtí a bhacann an léamh téacs, agus ansin soilsiú leagan amach nuair a bhíonn an clóchur luchtaithe (FOUT/FOIT). A dhéanamh seo i gceart go láimhe, tá gá agat @font-face, font-display, réamhuachta, agus meáchain faillí-chomthéacs.
Cén fáth go bhfuil sé tábhachtach
next/font a dhéanann an liosta seiceála iomlán ar bharrfheidhmíochta clóchur — féin-óstáil (luas + príobháideacht), fo-thacair agus réamhuachta (níos beag, níos gasta), agus comhthéacs meáchain faillí (gan gealadh leagan amach) — taobh thiar de dhún iompórtáil.
Baineann sé a dhéanamh feidhm ar bharrfheidhmíochta fánach agus furasta go mícheart agus is é an bealach a mholtar a úsáid na clóchur Google agus áitiúil i Next.js.