Penggunaan font seharusnya disesuaikan dengan gaya dan tujuan sebuah website. Dan Google telah menyediakan sebuah layanan yang memberikan desainer web untuk memilih font yang sesuai. Nama layanan tersebut adalah Google Fonts yang disediakan secara gratis.
Hal ini harus diketahui siapapun yang belajar desain web. Terutama pemula yang sedang membuat theme sendiri dari nol. Meskipun belajarnya secara mandiri dengan theme blogger gratisan. Dan mendapati realita seperti ini tidak perlu berkecil hati karena di hadapan Google tetap sama.
Sebagaimana diketahui bersama bahwa Blogger gratisan yang notabene milik Google. Maka pengguna gratisan juga mendapat kesempatan yang sama untuk menjadi publisher di Google Adsense. Berbeda kan dengan platform lain yang baru terbuka kesempatannya setelah menggunakan hosting berbayar.
Nah, menindaklanjuti keistimewaan tersebut kita lanjutkan dengan mempelajari layanan gratis lainnya dari Google. Dan pada kesempatan kali ini kita akan berkenalan dengan Google Fonts yang mempunyai koleksi huruf yang banyak untuk kita coba salah satunya.
Apa itu Google Fonts?
Google Fonts adalah sebuah layanan yang disediakan oleh Google yang menyediakan ribuan jenis huruf atau font gratis yang dapat digunakan secara bebas oleh pengguna internet. Dengan Google Font, pengguna dapat dengan mudah menemukan dan memilih berbagai jenis huruf yang dapat digunakan untuk keperluan desain grafis, situs web, atau aplikasi.
Google Font menyediakan berbagai macam jenis huruf seperti roboto, open sans, serif, sans-serif, ubuntu, sora, hingga handwriting. Selain itu, Google Font juga menyediakan berbagai pilihan ukuran dan gaya huruf untuk memenuhi berbagai kebutuhan desain.
Keuntungan Menggunakan Google Fonts
Keuntungan menggunakan Google Fonts sangatlah banyak. Dan kesempatan ini kita batasi pembahasannya hanya untuk penggunaan website. Dan setelah merangkum dari beberapa sumber. Maka keuntungan penggunaan tersebut diantaranya adalah:
1. Lebih banyak pilihan font
Google Fonts menyediakan ribuan jenis huruf atau font yang dapat digunakan secara gratis. Seperti misalnya Poppins, Oswald, Quicksand, Lato dan lain-lain. Hal ini memberikan kebebasan pada desainer web untuk memilih font yang sesuai dengan karakteristik dan nilai seni masing-masing.
2. Loading website lebih cepat
Theme Blogger mendukung penempatan link yang menautkan layanan CDN (Content Delivery Network). Dan fonts yang di-hosting pada server Google dapat diunduh dengan lebih cepat melalui layanan CDN tersebut. Sehingga akses cepat untuk font ini akan mempercepat waktu loading website.
3. Kompatibilitas yang baik
Google Fonts sudah dioptimalkan khusus untuk penggunaan pada web, sehingga dapat diakses dengan mudah oleh pengunjung website dari berbagai perangkat dan browser.
4. Gratis
Pengguna tidak perlu membayar lisensi untuk menggunakan Google Fonts pada website mereka. Dan kata "gratis" disini termasuk untuk keperluan pribadi maupun komersial. Sehingga hal ini membantu menghemat biaya dalam pembuatan website. Dan tidak perlu juga menjadi seorang bajak laut, bajak darat atau bajak maya.
5. Mudah digunakan
Penggunaan Google Fonts pada website sangat mudah, cukup dengan menambahkan kode sumber font ke dalam HTML atau CSS.
6. Dapat diperbarui secara otomatis
Jika ada perbaikan atau perubahan pada font yang di-hosting di server Google, maka font tersebut akan diperbarui secara otomatis pada website yang menggunakan font tersebut.
Cara Menggunakan Google Fonts pada Theme Blogger
Setelah mengetahui banyak tentang Google Fonts selanjutnya kita tentu ingin mencobanya. Untuk itu kita coba praktekan terlebih dahulu pada theme Blogger gratisan. Dan berikut adalah cara menggunakan Google Fonts pada Theme Blogger yang disertai dengan gambar.
1. Kunjungi Google Fonts.
2. Cari font yang diinginkan, misalnya ketik "ubuntu".
3. Jenis huruf "ubuntu" ditampilkan oleh Google Fonts. Selanjutnya silahkan scroll ke bawah untuk mengetahui gayanya.
4. Misalnya mau piih font Ubuntu dengan style Light 300 maka silahkan klik "Select Light 300".
5. Perhatikan pada bagian "Use on the web". dengan keadaan <link> yang sudah ceklis.
6. Scroll ke bawah sedikit hingga muncul icon copy (gambar kertas tertumpuk). Klik icon tersebut untuk menyalin kode tautan CDN ke Google Fonts.
7. Buka tab baru untuk akes masuk ke blogger.com.
8. Setelah login dengan akun gmail silahkan menuju "Tema" kemudian klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".
9. Paste kode yang didapatkan dari Google Fonts tersebut diantara tag <head> dan </head>.
10. Kode sumber yang dicopas asalnya ada beberapa namun untuk theme blogger saya hanya mengambil baris kode seperti terlihat di bawah ini saja.
11. Untuk penerapan kode CSS-nya silahkan buka kembali Google Fonts sebelumnya.
12. Scroll ke bawah sedikit kemudian klik icon copy pada bagian "CSS rules to specify families"
8. Tempatkan pada bagian kode CSS yang diinginkan dengan menambahkan kode: font-family: ubuntu-light!important;, 'Ubuntu', sans-serif; atau sesuai kode css yang didapat dari Google Fonts.
9. Misalnya saya ingin menyisipkan pada kode CSS pada script auto read more yang menggunakan judul posting.
10. Lihat perbedaannya! Ini adalah kode sebelumnya tanpa disisipkan font yang berasal dari Google.
11. Sedangkan ini baris kode setelah menggunakan font Ubuntu Light 300 dari Google Fonts.
13. Secara tampilan terlihat berbeda bukan? Penambahan !important agar pengaturan ini didahulukan dibandingkan pengaturan CSS bawaan dari framework seperti Bootstrap, Tailwind atau Halfmoon.
Penutup
Google Fonts adalah salah satu layanan yang patut untuk dicoba. Dengan menggunakannya untuk website kita memiliki banyak pilihan font dan mempercepat waktu loading website. Selain itu, pengguna juga tidak perlu membayar lisensi untuk penggunaannya. Terakhir yang tidak kalah penting adalah cara penggunaannya yang mudah meskipun menggunakan theme blogger gratisan.
Sekian tutorial kali ini tentang cara menggunakan Google Fonts pada theme blogger.
Semoga bermanfaat.
mas, wa ga aktif, telegram juga, by supri :)
BalasHapusiya nih, hp rusak dipake anak2 mulu. wa + telegram desktop gak tau gak masuk2. hrs ott dr hp..... blm bsa kebeli hp bru hehe
Hapus