Menggunakan Google Fonts di Web / Blog
Banyak Pilihan Fonts Keren Untuk Web / Blog !!!
Fonts atau tulisan di HTML CSS gak cuma segitu doang, kita bisa sisipkan juga misalnya Google Fonts didalamnya. Tentu tampilannya lebih bagus dan pilihannya juga banyak. Dengan menggunakan Google Fonts biasanya untuk memberikan tampilan tulisan yang lebih keren dan cocok untuk web kalian karena kalo keren doang gak cukup, harus diperhitungkan juga cocok apa enggaknya.
Cocok artinya penempatan yang pas dan font yang digunakan gak ribet ketika dibaca pengunjung, karena biasanya ada font yang memang keren tapi sulit untuk dibaca. Betul ? Ya, tapi disini saya hanya bagikan bagaimana cara menyisipkan Google Fonts di HTML CSS, selanjutnya untuk soal cocok gak cocok bisa kalian sesuaikan sendiri.
Pertama, silahkan kunjungi Google Fonts lalu pilih fonts mana yang akan digunakan. Silahkan pilih font mana yang akan digunakan, banyak banget pilihannya. Kalian bisa klik “Add to Collection” kalo suka berkoleksi atau mungkin di lain waktu mau pakai font ini lagi jadi gak perlu repot-repot carinya cukup ke koleksi kalian. Bisa juga klik “Pop Out” ikon yang kotak / klik langsung nama font nya untuk melihat lebih detail dari font tersebut di jendela baru.
Kalo mau langsung dipake langsung aja klik “Quick-Use“. Misalnya saya mau menggunakan font Indie Flower, 1 style by Kimberly Geswein dan saya pilih “Quick-Use” karena keliatannya bagus dan mau langsung digunakan.
Baca Juga:
Setelah klik “Quick-Use” silahkan scroll kebawah sampa bagian No. 3 “Add this code to your website“. Perhatian, setiap fonts pasti beda-beda penjelasannya mungkin ada yang panjang penjelasan di No. 1 dan No. 2 nya atau mungkin ada yang punya banyak pilihan pada No. 2 nya, kalian bisa improvisasi aja ya. Tapi pada fonts ini hanya da satu pilihan di bagian No. 2 nya yaitu “Latin” makanya cuma bisa pilih satu itu aja kemudian ke bagian No. 3 silahkan salin (copy) code yang ada ke dokumen HTML kalian di bagian <head>.
Tempel (paste) code yang tadi di dokumen HTML kalian seperti gambar tersebut, lalu kembali lagi ke layar Google Fonts dan cek bagian No. 4 disitu ada code untuk CSSnya. (lihat gambar) Salin code CSS dan paste di bagian text yang akan kita gunakan seperti ini, misalnya pada dokumen HTML saya mau merubah tulisan h1 yang ada. Maka akan seperti ini (lihat gambar).
Diatas saya contohkan mau merubah font untuk tulisan h1 dan seperti itulah penulisannya, nilai CSS nya hasil paste dari salinana code yang di layar Google Fonts tadi. Jangan sampe salah tulis ya !
Masih bingung ? Lihat : Video Tutorial Cara Pake Google Fonts di Web / Blog.
Sekarang mari kita cek hasil/perbedaan sebelum menggunakan Google Fonts itu dan sebelumnya, bukan lihat bagus atau tidaknya (karena sesuai font yang kita pilih tadi) tapi kita lihat apakah berfungsi atau tidak. Save dan cek website kalian.
Punya saya berfungsi normal, punya kalian gimana ? Kalo gak berfungsi silahkan di cek lagi codingnya ya, lihat gambar juga sebagai contoh.
Selamat mencoba !