Memilih jenis font apa yang sesuai untuk situs atau aplikasi web yang akan kita buat, merupakan salah satu hal yang cukup penting bagi kita. Selain tidak menyulitkan pengunjung atau pengguna untuk membaca konten (baca: tulisan) yang ada di web kita, tentu unsur keindahannya pun kita harapkan. Salah satu alternatif yang bisa kita gunakan adalah dengan memanfaatkan Google Fonts. Setidaknya ada tiga alasan mengapa kita menggunakan Google Fonts:
- Mudah menggunakannya
- Tersedia banyak jenis dan style
- Gratis
Untuk menggunakan Google Fonts pada web kita, pertama, kita masuk ke halaman www.google.com/fonts. Langkah kedua setelah kita berada di halaman Google Fonts, kita pilih jenis dan style font apa yang akan kita gunakan. Kemudian akan ditampilkan kode css untuk kita pasang di web kita. Done. Font yang telah kita pilihpun bisa kita gunakan untuk web kita.
Misal kita akan memilih jenis font berupa Open Sans dengan semua style yang ada, maka kode yang akan kita dapat adalah:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic,800,800italic,300italic,300" rel="stylesheet" type="text/css">
atau
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic,800,800italic,300italic,300);
Kita bisa menggunakan salah satu dari kedua kode tersebut sesuai selera kita masing-masing. Perbedaan penggunaannya adalah, untuk yang pertama, kode disisipkan pada script page yang kita buat (biasanya di antara tag <head></head>), sementara kode yang kedua disisipkan di dalam file css. Adapun penggunaannya, sama seperti penggunaan font lainnya yaitu dengan kode:
font-family: 'Open Sans', sans-serif;
Gampang, bukan?
Ya, sangat gampang. Namun, ada kendala yang cukup mengganggu. Dikarenakan akses font ini berlangsung secara online, dalam arti karena lokasi font berada pada web Google Fonts, mau tidak mau untuk menggunakannya, kita pun harus selalu terhubung dengan internet. Jika web kita dijalankan secara offline (misal sebagai aplikasi yang dijalankan hanya di local area network sebuah kantor yang tidak dihubungkan dengan internet), dengan kode yang kita dapatkan seperti di atas, tentu kita tidak dapat menerapkannya untuk web kita.
Well, seperti kita tahu, sebenarnya kode tersebut di atas berguna untuk mengakses ataupun meng-import kode css yang ada pada file css Google Fonts yaitu https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic,800,800italic,300italic,300. Jadi, secara teknik, kita masih dapat menggunakan Google Fonts untuk aplikasi web kita yang berjalan secara offline yaitu dengan cara menyalin dan menyimpan file css Google Fonts tersebut ke dalam folder aplikasi web kita.
Silahkan klik tautan Google Fonts di atas. Tautan tersebut akan menampilkan sebuah file css.
Simpan file tersebut (klik Ctrl+S) dengan nama font-open-sans.css pada folder css pada folder aplikasi web kita. Buka file css yang telah kita download menggunakan text editor (misal Notepad atau Sublime Text). Copy dan buka semua url font seperti pada gambar di atas yang berwarna biru. Saat kita buka url tersebut, secara otomatis akan terbuka window Save As yang memerintahkan kita untuk menyimpan file font. Simpan file font pada folder css/fonts. Misal url yang kita buka adalah https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTa-j2U0lmluP9RWlSytm3ho.woff2. Maka file font yang tersimpan bernama DXI1ORHCpsQm3Vp6mXoaTa-j2U0lmluP9RWlSytm3ho.woff2 (sebaiknya biarkan tetap demikian namanya). Jika sudah selesai, sekarang kita lakukan sedikit modifikasi pada script css font-open-sans.css:
Demikian. Mudah-mudahan bermanfaat. Happy coding! :)
Ya, sangat gampang. Namun, ada kendala yang cukup mengganggu. Dikarenakan akses font ini berlangsung secara online, dalam arti karena lokasi font berada pada web Google Fonts, mau tidak mau untuk menggunakannya, kita pun harus selalu terhubung dengan internet. Jika web kita dijalankan secara offline (misal sebagai aplikasi yang dijalankan hanya di local area network sebuah kantor yang tidak dihubungkan dengan internet), dengan kode yang kita dapatkan seperti di atas, tentu kita tidak dapat menerapkannya untuk web kita.
Well, seperti kita tahu, sebenarnya kode tersebut di atas berguna untuk mengakses ataupun meng-import kode css yang ada pada file css Google Fonts yaitu https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic,800,800italic,300italic,300. Jadi, secara teknik, kita masih dapat menggunakan Google Fonts untuk aplikasi web kita yang berjalan secara offline yaitu dengan cara menyalin dan menyimpan file css Google Fonts tersebut ke dalam folder aplikasi web kita.
Silahkan klik tautan Google Fonts di atas. Tautan tersebut akan menampilkan sebuah file css.
Simpan file tersebut (klik Ctrl+S) dengan nama font-open-sans.css pada folder css pada folder aplikasi web kita. Buka file css yang telah kita download menggunakan text editor (misal Notepad atau Sublime Text). Copy dan buka semua url font seperti pada gambar di atas yang berwarna biru. Saat kita buka url tersebut, secara otomatis akan terbuka window Save As yang memerintahkan kita untuk menyimpan file font. Simpan file font pada folder css/fonts. Misal url yang kita buka adalah https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTa-j2U0lmluP9RWlSytm3ho.woff2. Maka file font yang tersimpan bernama DXI1ORHCpsQm3Vp6mXoaTa-j2U0lmluP9RWlSytm3ho.woff2 (sebaiknya biarkan tetap demikian namanya). Jika sudah selesai, sekarang kita lakukan sedikit modifikasi pada script css font-open-sans.css:
url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTa-j2U0lmluP9RWlSytm3ho.woff2)
menjadi
url('fonts/DXI1ORHCpsQm3Vp6mXoaTa-j2U0lmluP9RWlSytm3ho.woff2')
Ulangi untuk semua kode yang serupa. Done. Sekarang kitapun bisa mengakses font dari Google Fonts yang telah kita pilih tanpa perlu terhubung dengan internet alias secara offline. Oya, karena sekarang kita mengakses file css bukan lagi ke file yang ada di web Google Fonts melainkan file css yang telah kita salin dan simpan ke dalam folder css aplikasi web kita, maka kitapun perlu merubah kode akses file css-nya menjadi:
<link href="css/font-open-sans.css" rel="stylesheet" type="text/css">
atau
@import url('css/font-open-sans.css');
Demikian. Mudah-mudahan bermanfaat. Happy coding! :)
