Font yang dihosting sendiri

Font yang dihosting sendiri adalah file font yang ditayangkan dari server Anda sendiri, bukan font dari penyedia font pihak ketiga (misalnya Google Fonts).

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 ini menggabungkan dua teknik performa untuk mengirimkan font yang dihosting sendiri secepat mungkin: penggunaan deklarasi font inline dan penggunaan format font WOFF2.

  • Deklarasi font inline: Menyejajarkan deklarasi @font-face dan font-family 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.

  • WOFF2: Dari font font modern, WOFF2 adalah yang terbaru, memiliki dukungan browser terluas, dan menawarkan kompresi terbaik. Karena menggunakan Brotli, WOFF2 mengompresi 30% lebih baik daripada WOFF.

Untuk meningkatkan performa lebih lanjut, pertimbangkan untuk menggunakan subsetelan font. Subsetelan font adalah praktik membagi file font menjadi subset yang lebih kecil - biasanya dengan tujuan menghapus glyph yang tidak digunakan. Hal ini dapat mengurangi ukuran file font secara signifikan. Alat untuk membuat subkumpulan font mencakup fontkit, subfont, dan glyphhanger.

Untuk informasi selengkapnya tentang praktik terbaik untuk font yang dihosting sendiri, lihat Menggunakan font yang dihosting sendiri.

Contoh:

HTML

<head>
    <style>
        @font-face {
            font-family: 'Google Sans';
            src: url("Google Sans.woff2") format('woff2');
            font-display: swap;
        }
        body {
            font-family: system-ui;
            font-size: 1em;
        }
        h1 {
            font-family: 'Google Sans', sans-serif;
            font-size: 3em;
        }
    </style>
</head>