Font pihak ketiga

Mengirim font dengan cepat sangatlah penting: pengiriman font yang lebih cepat tidak hanya berarti teks akan terlihat oleh pengguna lebih cepat - tetapi juga berdampak besar pada apakah font menyebabkan pergeseran tata letak. Jika font tidak dapat dikirimkan sebelum diperlukan, biasanya akan ada pergeseran tata letak saat font ditukar. Ukuran pergeseran tata letak ini dapat bervariasi bergantung pada seberapa mirip font penggantian dengan font web. Untuk melihat penerapan fenomena ini, lihat demo dan bandingkan pergeseran tata letak yang terjadi pada koneksi cepat dengan koneksi lambat.

Contoh di bawah menggabungkan dua teknik performa untuk memuat font pihak ketiga sesegera mungkin: penggunaan deklarasi font inline dan penggunaan petunjuk resource preconnect. Meskipun cuplikan kode ini menunjukkan cara memuat font dari Google Fonts, teknik ini juga berlaku untuk penyedia font pihak ketiga lainnya.

  • Deklarasi font inline: Membuat deklarasi font-family sebaris di dokumen utama, bukan menyertakan informasi ini dalam stylesheet eksternal, memungkinkan browser menentukan file font mana yang akan digunakan di halaman tanpa harus menunggu file stylesheet terpisah untuk didownload. Hal ini penting karena umumnya browser tidak akan mendownload file font sebelum mengetahui bahwa font tersebut digunakan di halaman. Dalam sebagian besar situasi, deklarasi font inline lebih disarankan untuk menggunakan preload untuk memuat font.

  • Preconnect: Cara yang direkomendasikan untuk memuat Google Fonts adalah dengan menggunakan tag <link> bersama dengan petunjuk resource preconnect. Petunjuk resource preconnect akan membuat koneksi awal dengan origin pihak ketiga. Dalam cuplikan kode di bawah ini, petunjuk resource pertama menyiapkan koneksi untuk mendownload stylesheet font; petunjuk resource kedua menyiapkan koneksi untuk mendownload file font.

Contoh:

HTML

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: system-ui;
            font-size: 1em;
        }
        h1 {
            font-family: 'Zen Tokyo Zoo', sans-serif;
            font-size: 3em;
        }
    </style>
</head>