Font Optimization
Memuat font yang tetap nyaman dibaca tanpa menambah request eksternal atau layout shift yang tidak perlu.
Tujuan belajar
- Menjelaskan dampak font terhadap loading dan layout stability
- Menggunakan next/font untuk font aplikasi yang terkelola
- Memilih subset dan display yang sesuai kebutuhan
- Menghindari pemuatan banyak font serta weight tanpa alasan
Isi lesson
6 blok- 1.Typography adalah bagian dari performance, bukan hanya stylingBelum selesaiWajib
- 2.Konfigurasi font utama pada root layoutBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Jangan menjadikan semua font asset globalBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Typography adalah bagian dari performance, bukan hanya styling
WajibFont menentukan keterbacaan, hierarchy, dan ruang layout. Ketika browser harus menunggu stylesheet atau file font eksternal, text dapat muncul terlambat atau berubah ukuran setelah fallback diganti. next/font mengelola font sebagai bagian dari build dan self-hosting, sehingga aplikasi tidak mengandalkan request font dari browser ke provider luar. Namun, optimasi tetap membutuhkan keputusan: pakai family yang memang diperlukan, pilih subset yang relevan, hindari banyak weight atau font dekoratif yang tidak dipakai, dan pastikan fallback serta display tidak merusak pengalaman baca. Tujuannya bukan menghapus identitas visual, melainkan menjaga text utama cepat dan stabil.
Bagian ini memengaruhi progres lesson.
Konfigurasi font utama pada root layout
Wajibimport { Montserrat } from "next/font/google";
const montserrat = Montserrat({
subsets: ["latin"],
display: "swap",
});
export default function RootLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
return (
<html lang="id" className={montserrat.className}>
<body>{children}</body>
</html>
);
}Contoh ini membuat Montserrat menjadi font aplikasi yang dikelola next/font. Subset menyatakan karakter yang benar-benar diperlukan, sedangkan display membantu browser tetap menampilkan text dengan fallback bila font belum siap. Jangan menambah banyak family atau configuration font ke root layout tanpa melihat route dan UI yang benar-benar memakainya.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususConfigure learning font with next/font
Konfigurasi Montserrat pada root layout lewat next/font agar font utama dikelola oleh build aplikasi.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Review mana yang paling berguna sebelum menambah font baru ke root layout?
Progres lesson naik setelah jawaban benar.
Peringatan
WajibJangan menjadikan semua font asset global
Menaruh banyak font atau weight di root layout terlihat praktis, tetapi dapat memperbesar biaya untuk setiap route. Jika font hanya mendukung satu visual khusus, pertimbangkan apakah ia benar-benar perlu, apakah dapat dibatasi scope-nya, atau apakah pengalaman dapat tetap jelas dengan font yang sudah tersedia.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Font memengaruhi keterbacaan, loading text, dan potensi layout shift.
- next/font mengelola font aplikasi melalui build dan self-hosting.
- Pilih subset, family, dan weight berdasarkan pemakaian nyata.
- Root layout perlu dijaga agar tidak mengirim resource tipografi yang tidak diperlukan semua route.
- Berikutnya, bundle awareness membantu membaca biaya JavaScript yang ikut dikirim ke browser.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Typography adalah bagian dari performance, bukan hanya styling.