Penggunaan Web Font Yang Mungkin Tidak Kamu Tahu?

Sekarang pada tahun 2021, saya ingin mempelajari praktik terbaik untuk menggunakan web font on high-performance sites.

Font Sistem

Browser menyertakan satu set web-safe fonts (e.g. Arial, Georgia, Times New Roman) yang dapat kamu gunakan secara default.

Menggunakan web-safe fonts atau system font stack akan menjadi opsi tercepat.

1font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
2sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
3
cssCopy

Mengapa Menggunakan Web Font?

Jika font sistem adalah opsi tercepat, mengapa web font ada? di karena Branding, improved design, and cross browser and device consistency dan juga 82% halaman web untuk desktop menggunakan web font.

Mari kita bahas lima area berbeda penggunaan web font.

1. Self Hosting
2. Preloading
3. Font Display
4. Variabel Font
5. Subsetting

1. Self Hosting

Google Fonts bertanggung jawab atas 70% dari semua penggunaan web font. Dengan lebih dari 1000 font, mereka menyediakan akses mudah ke font berkualitas, berbagai format, dan performant defaults (pre-connecting and swapping).

Namun, Google Font tidak lagi diperlukan Sejak 2018, Google telah menyarankan self-hosting untuk kinerja optimal melalui preloading.

Caching tidak diperlukan lagi. Kenapa? katakanlah kamu menggunakan font "Roboto", yang merupakan font populer di Google Font saat ini. Kemungkinan kamu telah mengunjungi banyak situs menggunakan font "Roboto" and cached the font.

Sehingga sejak Oktober 2020, Browser Chrome tidak lagi mengizinkan shared cache across sites. Browser Safari telah menerapkan cara ini sejak 2013. Di karenakan font akan diunduh ulang untuk setiap situs, regardless of it being cached.

Saat menggunakan self hosting, pastikan kamu cache font kamu dengan Cache-Control di header HTTP. Sehingga immutable memberitahu browser bahwa file tidak akan pernah berubah. Jika permintaan dibuat dalam waktu max-age (1 tahun), permintaan tersebut menghindari untuk mengirim ulang dan memastikan bahwa itu adalah konten terbaru.

1Cache-Control: public, immutable, max-age=31536000
2
bashCopy

Jika kamu membutuhkan Google Font, gunakan pengoptimalan ini. Dengan perubahan terbaru di v2 API, kamu dapat menyesuaikan font untuk pengguna dan platform tertentu (termasuk font variabel).

2. Preloading

Browser menetapkan loading priorities ke berbagai resources. Secara default, CSS akan dimuat sebelum skrip dan gambar. Kamu dapat memengaruhi pentingnya resources dengan memuat aset penting terlebih dahulu.

Browser secara default lambat untuk membaca font. Dengan melakukan preloading, browser akan mengambil file font sesegera mungkin. Kemudian, browser men-cache font sehingga tidak perlu mengambil ulang.

Preloading dapat meningkatkan metrik kinerja seperti Time to Interactive dan First Contentful Paint. Misalnya saja Shopify, lihat peningkatan 50% (1,2 detik) di First Contentful Paint, di karenakan menghapus Flash of Invisible Text (FOIT) mereka.

1<link
2    rel="preload"
3    href="/fonts/inter-var-latin.woff2"
4    as="font"
5    type="font/woff2"
6    crossOrigin="anonymous"
7/>
8
jsxCopy

3. Font Display

font-display memungkinkan kamu untuk mengubah perilaku rendering web font dengan nilai seperti auto, swap, block, fallback dan optional.

Saat memuat web font, browser ingin mencegah pergeseran tata letak. Ini terjadi dalam dua cara:

• Flash of Unstyled Text (FOUT) — Font fallback ditukar dengan font baru (e.g. swap).
• Flash of Invisible Text (FOIT) — Teks tak terlihat ditampilkan pada halaman sehingga font baru ditampilkan (e.g. block).

Browser saat ini memiliki strategi default yang mirip dengan block. Satu-satunya pilihan yang menghilangkan pergeseran tata letak adalah optional.

1@font-face {
2   font-family: 'Inter';
3   font-style: normal;
4   font-display: optional;
5   src: url(/fonts/inter-var-latin.woff2) format('woff2');
6}
7
cssCopy

Support: All modern browsers

4. Variable Font

Variable Font atau Font variabel memungkinkan browser untuk menggabungkan beberapa gaya dan bobot (e.g. bold, italic) ke dalam satu file font.

1@font-face {
2    font-family: 'Inter';
3    font-style: normal;
4    font-weight: 100 900; // Range of weights supported
5    font-display: optional;
6    src: url(/fonts/inter-var-latin.woff2) format('woff2');
7}
8
cssCopy

kamu dapat mencoba berbagai opsi font variabel disini.

5. Subsettings

File font berisi multiple languages dan glyphs, yang meningkatkan ukuran file. Subsetting adalah penghapusan karakter yang tidak kamu butuhkan.

Misalnya, kita mungkin ingin menggunakan font dan subset variabel Inter ke bahasa latin.

1@font-face {
2  font-family: 'Inter';
3  font-style: normal;
4  font-weight: 100 900; // Range of weights supported
5  font-display: optional;
6  src: url(/fonts/inter-var-latin.woff2) format('woff2');
7  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
8    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
9    U+FEFF, U+FFFD;
10}
11
cssCopy

Kesimpulan

• Gunakan font variabel
• Lakukan Preloading file font kamu
• Gunakan Self-host dari pada Google Font
• Gunakan font-display: optional untuk mencegah pergeseran layout

Future

Jika kamu perlu menggunakan font-display: swap, mungkin saja di tahun yang akan datang dukungan untuk Font Metrics Override akan mengurangi pergeseran layout saat swapping.

1@font-face {
2  font-family: ...;
3  src: ...;
4  ascent-override: 80%;
5  descent-override: 20%;
6  line-gap-override: 0%;
7  ...;
8}
9
cssCopy