Teknik Font Subsetting & Self-Hosting Google Fonts di Next.js untuk Mengeliminasi Render-Blocking Resources

Teknik Font Subsetting dan Self-Hosting Font di Next.js untuk Meningkatkan Performa

Memuat font eksternal dari server Google Fonts dapat menyebabkan keraguan muat (Flash of Unstyled Text - FOUT) dan menambah latensi DNS lookup. Dengan fitur `next/font`, Next.js secara otomatis mendownload file font saat kompilasi, melakukan font subsetting (hanya mengambil karakter Latin yang digunakan), dan memuat font secara lokal (self-hosting) dengan zero layout shift!

```typescript

import { Playfair_Display, Inter } from 'next/font/google';

export const playfair = Playfair_Display({

subsets: ['latin'],

display: 'swap',

variable: '--font-serif',

});

```

Dapatkan website ultra-cepat berstandar internasional di Harga Jasa Pembuatan Website Bali Top Studio.