Cara menggunakan Google Fonts CSS API untuk mengirimkan font web secara efisien.
Selama bertahun-tahun, banyak yang telah berubah dengan teknologi font web. Apa yang dulunya merupakan praktik khusus yang memerlukan gambar teks atau plugin Flash (dan yang membahayakan pengoptimalan mesin telusur situs Anda) sekarang menjadi praktik standar di seluruh web. Pada suatu ketika, Anda harus memuat seluruh font sebelum halaman dimuat—dengan gaya dan karakter yang mungkin belum pernah Anda gunakan—tetapi hal itu sudah menjadi sesuatu yang sudah tidak ada di masa lalu.
Google Fonts CSS API juga telah berkembang dari tahun ke tahun untuk mengikuti perubahan teknologi font web. Penggunaan API ini telah jauh berkembang dari proposisi nilai aslinya—untuk mempercepat web dengan mengizinkan browser Anda meng-cache font yang biasa digunakan di semua situs yang menggunakan API tersebut. Hal ini tidak lagi berlaku, tetapi API masih memberikan pengoptimalan tambahan yang penting sehingga situs 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, sehingga memastikan pengunjung situs dapat memuat konten secepat mungkin. API akan merespons setiap permintaan dengan font terbaik untuk browser web tersebut.
Semua ini terjadi dengan memasukkan 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 harus Anda lakukan adalah menambahkan tautan stylesheet khusus ke dokumen HTML, kemudian merujuk ke {i>font<i} dengan gaya CSS.
Minimum yang perlu Anda lakukan adalah menyertakan satu baris di HTML Anda, 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 keluarga mana yang Anda inginkan dan, secara opsional, bobot, gaya, subset, dan banyak opsi lainnya. Selanjutnya, API akan menangani permintaan Anda dengan salah satu dari dua cara berikut:
- Jika permintaan Anda menggunakan parameter umum yang filenya sudah dimiliki API, permintaan tersebut akan segera menampilkan CSS kepada pengguna, dan mengarahkannya ke file ini.
- Jika Anda meminta font dengan parameter yang saat ini belum di-cache oleh API, font tersebut akan subset font Anda dengan cepat, menggunakan HarfBuzz untuk melakukannya dengan cepat, dan menampilkan CSS yang mengarah ke font tersebut.
File font bisa berukuran besar, tetapi tidak harus berukuran
Font web bisa berukuran besar; itu benar. Hanya satu bobot Noto Sans Jepang di WOFF2 yang hampir 3,4 MB—dan mengunduh file ini untuk setiap pengguna akan menyeret waktu muat halaman Anda. Ketika setiap milidetik sangat berharga dan setiap byte sangat berharga, Anda harus memastikan 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 menyajikan teks dan gaya yang diperlukan oleh situs Anda kepada pengguna saja. Daripada menampilkan 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 ini akan menampilkan file CSS kepada pengguna dengan unicode-range yang sudah diaktifkan (jika didukung oleh browser web mereka), sehingga mereka memuat font hanya untuk karakter tertentu yang dibutuhkan situs Anda.
Deskriptor 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 tersebut ditampilkan pada halaman, font tersebut akan didownload. Ini bekerja 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 harus memuat ketiga himpunan karakter ini, akan ada lebih dari 600 glyph.
Tindakan ini juga mengaktifkan 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. Font ini biasanya sangat besar dan banyak karakter dalam bahasa tersebut tidak digunakan sesering yang lain.
Menggunakan CSS API dan rentang unicode dapat mengurangi transfer file sekitar 90%. Dengan menggunakan deskripsi unicode-range, Anda dapat menentukan setiap bagian secara terpisah, dan setiap potongan hanya didownload setelah konten Anda berisi salah satu karakter dalam rentang karakter ini.
Contoh: Jika Anda ingin menyetel hanya kata "こんたち aktifkan" dalam Noto Sans JP, Anda dapat:
- Hosting sendiri file WOFF2 Anda.
- 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% lebih dari meng-hosting sendiri font WOFF2, berkat dukungan bawaan API untuk memisahkan font besar menjadi rentang unicode. Dengan melangkah lebih jauh dan menentukan teks yang ingin Anda tampilkan, Anda dapat lebih mengurangi ukuran font menjadi hanya 95,3% dari font CSS API–99,9% lebih kecil daripada font yang dihosting sendiri.
Google Fonts CSS API akan secara otomatis mengirimkan font dalam format terkecil dan paling kompatibel yang didukung oleh browser pengguna Anda. Jika pengguna Anda menggunakan browser dengan dukungan WOFF2, API akan menyediakan font dalam WOFF2, tetapi jika mereka menggunakan browser lama, API akan mengirimkan font dalam format yang didukung oleh browser tersebut. Untuk mengurangi ukuran file setiap pengguna, API juga menghapus data dari font saat tidak diperlukan. Misalnya, data petunjuk akan dihapus untuk pengguna yang browsernya tidak membutuhkannya.
Persiapkan font web Anda untuk masa depan dengan Google Fonts CSS API
Tim Google Fonts juga berkontribusi terhadap standar W3C baru yang terus berinovasi pada teknologi font web, seperti WOFF2. Salah satu project saat ini adalah inkremental Font Transfer, yang memungkinkan pengguna memuat bagian file font yang sangat kecil saat digunakan di layar dan streaming sisanya sesuai permintaan, melebihi performa rentang unicode. Saat Anda menggunakan API font web kami, pengguna akan mendapatkan peningkatan teknologi transfer font mendasar ini saat tersedia di browser mereka.
Inilah keindahan API font: pengguna Anda mendapatkan manfaat dari setiap peningkatan teknologi baru tanpa perlu mengubah situs Anda. Format font web baru? Tidak masalah. Dukungan browser atau sistem operasi baru? Ini semua sudah terawat. Jadi, alih-alih terjebak dengan pemeliharaan {i>font<i} web, Anda bebas untuk fokus pada pengguna dan konten Anda.
Mendukung font variabel
Font variabel adalah file font yang dapat menyimpan berbagai variasi desain di antara beberapa sumbu, dan versi baru Google Fonts CSS API menyertakan dukungan untuk font tersebut. Menambahkan sumbu variasi tambahan memungkinkan fleksibilitas baru dengan font—tetapi ukuran file font dapat hampir dua kali lipat.
Jika permintaan CSS API Anda lebih spesifik, Google Fonts CSS API hanya dapat menampilkan sebagian font variabel yang diperlukan situs Anda, untuk mengurangi ukuran download bagi pengguna. Tindakan ini memungkinkan penggunaan font variabel untuk web tanpa menyebabkan waktu pemuatan halaman yang lama. Anda bisa melakukannya dengan menetapkan satu nilai pada sumbu, atau menetapkan rentang; Anda bahkan bisa menetapkan beberapa sumbu dan beberapa kelompok font, semuanya dalam satu permintaan. API ini fleksibel untuk memenuhi kebutuhan Anda.
Mudah diterapkan, dioptimalkan untuk Anda
Google Fonts CSS API membantu Anda memberikan font yang:
- Lebih kompatibel dengan browser web.
- Sekecil mungkin.
- Dikirimkan dengan cepat.
- Lebih mudah untuk Anda gunakan.
Untuk informasi lebih lanjut tentang Google Fonts, kunjungi fonts.google.com. Untuk mempelajari CSS API lebih lanjut, tinjau Dokumentasi API.
Ucapan terima kasih
Banner besar oleh leesehee.