Optimasi Font dengan next/font

Masalah font biasa

Cara lama memuat Google Fonts lewat <link> di HTML menyebabkan teks berkedip (FOUT): teks muncul dulu dengan font sistem, lalu berganti saat font asli selesai diunduh. Selain itu, ada request tambahan ke server Google setiap halaman dibuka.

next/font/google

// app/layout.tsx
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="id" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

Next.js mengunduh font saat build dan menyajikannya dari domain-mu sendiri. Tidak ada request ke Google, tidak ada kedip, dan privasi user lebih terjaga.

Beberapa font sekaligus

import { Inter, JetBrains_Mono } from "next/font/google";

const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
const mono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-mono" });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="id" className={inter.variable + " " + mono.variable}>
      <body>{children}</body>
    </html>
  );
}

Dengan variable, kamu bisa memakai font lewat CSS variable di Tailwind atau CSS biasa.

Font lokal

Punya file font sendiri? Pakai next/font/local dengan path ke file .woff2 di folder project. Sama cepatnya, tanpa ketergantungan eksternal.

Kesalahan umum pemula

• Memakai <link> Google Fonts manual. Kehilangan optimasi: request eksternal tiap halaman dibuka dan teks berkedip (FOUT).
• Memuat terlalu banyak varian font. Setiap weight (400, 500, 700...) menambah ukuran unduhan. Pilih yang benar-benar dipakai.
• Subset berlebihan. Menambah subset Cyrillic, Greek, dan lainnya padahal kontenmu bahasa Indonesia hanya memperbesar file.

Latihan singkat

1. Ganti font <link> manual (kalau ada) dengan next/font/google dan perhatikan tidak ada lagi kedip teks.
2. Tambahkan font monospace sebagai CSS variable kedua, lalu pakai untuk elemen <code> di project-mu.

Rangkuman

• next/font/google mengunduh font saat build dan menyajikan dari domain sendiri.
• Hasilnya: tidak ada request ke Google, tidak ada teks berkedip (FOUT).
• Pilih subset seminimal mungkin (latin cukup untuk bahasa Indonesia).
• next/font/local untuk file font sendiri dengan kecepatan yang sama.

Catatan teknis: Pilih subsets seminimal mungkin. Subset "latin" cukup untuk bahasa Indonesia. Menambah subset yang tidak dipakai hanya memperbesar file font yang diunduh user.