~18 min · next/font, self-hosted fonts, CLS
next/font 가 build time 에 font download, static asset 와 함께 self-host (Google 한테 request 안 함), CSS size-adjust 사용해서 font swap layout shift 제거. 한 import, network privacy 걱정 0, font loading 의 CLS 0.
next/font/google 에서 import; family 고르고, subset 골라, optional 로 CSS variable 에서 사용할 variable 명명 (Tailwind 친화).
woff2 file 을 repo 어디든 drop 하고 next/font/local 에서 import. Proprietary 또는 custom font 위해.
import { Inter, JetBrains_Mono } from 'next/font/google';
const inter = Inter({ subsets: ['latin'], display: 'swap' });
const mono = JetBrains_Mono({ subsets: ['latin'], variable: '--font-mono' });
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={`${inter.className} ${mono.variable}`}>
<body>{children}</body>
</html>
);
}import localFont from 'next/font/local';
const geist = localFont({
src: [
{ path: './fonts/Geist-Regular.woff2', weight: '400' },
{ path: './fonts/Geist-Bold.woff2', weight: '700' },
],
variable: '--font-geist',
});next/font 추가. DevTools Network tab 이 runtime 에 fonts.googleapis.com 에 request 안 보이는지 확인.아직 댓글이 없어요. 첫 댓글을 남겨보세요.