Cara menggunakan Google Fonts CSS API untuk mengirimkan font web secara efisien.
Selama bertahun-tahun, banyak hal yang berubah dengan teknologi font web. Apa yang dulunya merupakan praktik khusus yang memerlukan gambar teks atau plugin Flash (dan yang mengganggu pengoptimalan mesin telusur situs Anda) kini menjadi praktik standar di seluruh web. Dulu, Anda harus memuat seluruh font sebelum halaman dimuat—dengan gaya dan karakter yang mungkin belum pernah Anda gunakan—tetapi hal itu sudah tidak berlaku lagi.
Google Fonts CSS API juga telah berkembang selama bertahun-tahun untuk mengikuti perubahan teknologi font web. Versi ini telah jauh berkembang dari proposisi nilai aslinya—untuk mempercepat web dengan memungkinkan browser menyimpan font yang biasa digunakan di semua situs yang menggunakan API. Hal ini tidak lagi berlaku, tetapi API masih memberikan pengoptimalan tambahan dan penting sehingga situs dapat dimuat dengan cepat dan font berfungsi dengan baik.
Dengan menggunakan Google Fonts CSS API, situs Anda hanya dapat meminta data font yang diperlukan untuk meminimalkan waktu pemuatan CSS-nya, sehingga memastikan pengunjung situs dapat memuat konten Anda secepat mungkin. API akan merespons setiap permintaan dengan font terbaik untuk browser web tersebut.
Semua ini terjadi dengan menyertakan satu baris HTML dalam kode Anda.
Cara menggunakan Google Fonts CSS API
Dokumentasi Google Fonts CSS API merangkumnya dengan baik:
Anda tidak perlu melakukan pemrograman apa pun; yang perlu Anda lakukan hanyalah menambahkan link stylesheet khusus ke dokumen HTML, lalu merujuk ke font dalam gaya CSS.
Minimal yang perlu Anda lakukan adalah menyertakan satu baris dalam HTML, seperti ini:
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
Saat meminta font dari API, Anda menentukan jenis atau kelompok mana yang Anda inginkan dan, secara opsional, bobot, gaya, subset, dan banyak opsi lainnya. API kemudian akan menangani permintaan Anda dengan salah satu dari dua cara berikut:
- Jika permintaan Anda menggunakan parameter umum yang filenya sudah dimiliki API, permintaan ini akan langsung menampilkan CSS kepada pengguna, mengarahkan mereka ke file ini.
- Jika Anda meminta font dengan parameter yang saat ini belum di-cache oleh API, font tersebut akan ditambahkan dengan cepat, menggunakan HarfBuzz untuk melakukannya dengan cepat, dan menampilkan CSS yang mengarah ke font tersebut.
File font dapat berukuran besar, tetapi tidak harus
{i>Font<i} web bisa berukuran besar; itu benar. Hanya satu ketebalan Noto Sans Japanese di WOFF2 yang berukuran hampir 3,4 MB—dan mendownloadnya ke setiap pengguna akan memperlambat waktu pemuatan halaman. Ketika setiap milidetik sangat berarti dan setiap byte sangat berharga, pastikan bahwa Anda hanya memuat data yang dibutuhkan pengguna.
Google Fonts CSS API dapat membuat file font yang sangat kecil (disebut subset), yang dihasilkan secara real time, untuk hanya menampilkan teks dan gaya yang diperlukan oleh situs Anda kepada pengguna. Daripada menayangkan seluruh font, Anda dapat meminta karakter tertentu menggunakan parameter text.
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />
CSS API juga menyediakan pengoptimalan font web tambahan kepada pengguna Anda secara otomatis, tanpa parameter API apa pun. API akan menampilkan file CSS pengguna dengan unicode-range yang telah diaktifkan (jika didukung oleh browser web mereka), sehingga font tersebut hanya dimuat untuk karakter tertentu yang diperlukan situs Anda.
Deskripsi CSS rentang unicode adalah salah satu alat yang kini dapat digunakan untuk mengatasi download font berukuran besar. Properti CSS ini menetapkan rentang karakter unicode yang terdapat dalam deklarasi @font-face. Jika salah satu karakter ini dirender pada halaman, font tersebut akan didownload. Ini berfungsi dengan baik untuk semua jenis bahasa, sehingga Anda dapat mengambil {i>font <i}yang menyertakan karakter Latin, Yunani, atau Sirilik dan membuat {i>subset<i} yang lebih kecil. Pada diagram sebelumnya, Anda dapat melihat bahwa jika Anda harus memuat ketiga set karakter ini, jumlahnya akan lebih dari 600 glyph.
Hal ini juga memungkinkan font China, Jepang, dan Korea (CJK) untuk web. Pada bagan sebelumnya, Anda dapat melihat bahwa {i>font <i}CJK mencakup 15-20 kali jumlah karakter yang dilakukan {i>font<i} karakter Latin. {i>Font<i} ini biasanya sangat besar dan banyak karakter dalam bahasa tersebut yang tidak digunakan sesering yang lain.
Menggunakan CSS API dan rentang unicode dapat mengurangi transfer file sebesar sekitar 90%. Dengan deskripsi unicode-range, Anda dapat menentukan setiap bagian secara terpisah, dan setiap bagian hanya didownload setelah konten Anda berisi salah satu karakter dalam rentang karakter ini.
Contoh: Jika hanya ingin menetapkan kata "こんにちは" dalam Noto Sans JP, Anda dapat:
- Hosting sendiri file WOFF2 Anda sendiri.
- Gunakan CSS API untuk mengambil WOFF2.
- Gunakan CSS API dengan parameter text= yang ditetapkan ke “こんにちは”.
Dalam contoh ini, Anda dapat melihat bahwa dengan menggunakan CSS API, Anda sudah menghemat 97,5% dibandingkan dengan menghosting sendiri font WOFF2, berkat dukungan bawaan API untuk memisahkan font besar ke dalam rentang unicode. Dengan melangkah lebih jauh dan menentukan dengan tepat teks yang ingin Anda tampilkan, Anda dapat mengurangi ukuran font menjadi hanya 95,3% dari font CSS API. Ini 99,9% lebih kecil daripada font yang dihosting sendiri.
Google Fonts CSS API akan otomatis mengirimkan font dalam format terkecil dan paling kompatibel yang didukung oleh browser pengguna Anda. Jika pengguna menggunakan browser dengan dukungan WOFF2, API akan menyediakan font dalam WOFF2, tetapi jika pengguna menggunakan browser lama, API akan mengirimkan font dalam format yang didukung oleh browser tersebut. Untuk mengurangi ukuran file bagi setiap pengguna, API juga menghapus data dari font jika tidak diperlukan. Misalnya, data petunjuk akan dihapus untuk pengguna yang browser-nya tidak memerlukannya.
Menyiapkan font web Anda untuk masa mendatang dengan Google Fonts CSS API
Tim Google Fonts juga berkontribusi pada standar W3C baru yang terus berinovasi dalam teknologi font web, seperti WOFF2. Salah satu project saat ini adalah Transfer Font Inkremental, yang memungkinkan pengguna memuat bagian file font yang sangat kecil saat digunakan di layar dan melakukan streaming sisanya sesuai permintaan, yang melampaui performa rentang unicode. Saat Anda menggunakan API font web kami, pengguna akan mendapatkan peningkatan teknologi transfer font yang mendasarinya saat tersedia di browser mereka.
Inilah keindahan API font: pengguna Anda mendapatkan manfaat dari setiap peningkatan teknologi baru tanpa adanya perubahan pada situs Anda. Format font web baru? Tidak masalah. Dukungan baru untuk browser atau sistem operasi? Masalahnya sudah ditangani. Jadi, Anda tidak perlu repot-repot melakukan pemeliharaan font web, dan dapat berfokus pada pengguna dan konten Anda.
Dukungan font variabel bawaan
Font variabel adalah file font yang dapat menyimpan berbagai variasi desain di antara beberapa sumbu, dan dukungan untuk Google Fonts CSS API versi baru. Menambahkan sumbu variasi tambahan akan memungkinkan fleksibilitas baru dengan font—tetapi hampir dapat menggandakan ukuran file font.
Jika Anda lebih spesifik dalam permintaan CSS API, Google Fonts CSS API hanya dapat menayangkan bagian font variabel yang diperlukan situs Anda, untuk mengurangi ukuran download bagi pengguna. Hal ini memungkinkan penggunaan font variabel untuk web tanpa menimbulkan waktu pemuatan halaman yang lama. Anda dapat melakukannya dengan menentukan satu nilai pada sumbu, atau menentukan rentang; Anda bahkan dapat menentukan beberapa sumbu dan beberapa jenis font dalam satu permintaan. API ini fleksibel untuk memenuhi kebutuhan Anda.
Mudah diterapkan, dioptimalkan untuk Anda
Google Fonts CSS API membantu Anda mengirimkan font yang:
- Lebih kompatibel dengan browser web.
- Sekecil mungkin.
- Dikirim dengan cepat.
- Lebih mudah digunakan oleh Anda.
Untuk informasi selengkapnya tentang Google Fonts, buka fonts.google.com. Untuk mempelajari CSS API lebih lanjut, tinjau Dokumentasi API.
Ucapan terima kasih
Banner besar oleh leesehee.