0 Comment

Cara Install Google Font ke Template - Tutorial Blog
Cara Install Google Font ke Template - Tutorial Blog
Font atau huruf yang digunakan pada sebuah laman web sangat mempengaruhi tingkat ke popularan situs web tersebut, penggunaan jenis font dan besar kecil ukuran font yang kurang tepat dapat membuat minat pembaca hilang secara tiba-tiba. ideal nya ukuran font yang membuat nyaman pembaca adalah 15px sampai 16 px, sedangkan jenis font yang ideal untuk situs web/blog adalah open sans, arial reguler, raleway dan masih banyak lagi, namun intinya pilih lah font yang umum dan rapi, sehingga tidak mengejutkan mata pembaca.

Bagaimana cara mengganti jenis huruf (font) pada template blog?

Login ke blogger, klik template > klick tingkat lanjut, kamu bisa memilih font header, font laman atau content yang sudah tersedia disitu. Namun saya tidak membahas itu lebih jauh karena saya rasa semua paham kalau memilih font dari pengaturan template. Tapi bagaimana jika ternyata kita tidak menemukan jenis font yang sesuai dengan yang kita inginkan di pengaturan template, maka solusi nya kita bisa menggunakan google font dengan cara menginstal nya di template blog kita. Ada banyak jenis-jenis font yang bagus di google font, mungkin ratusan atau 300 jenis font bahkan mungkin lebih dari itu, saya tidak pernah menghitung nya.

Cara Memilih dan Mengambil Google Font
  1. Kunjungi https://fonts.google.com untuk memilih font
  2. Setelah menemukan jenis font yang tepat, klick tanda +,
  3. Setting sedikit panda jendela yang muncul seperti gambar di bawah ini.
Keterangan Gambar:
  • Pada tab costumize pilih regular 400 dan bold 700, itu merupakan merupakan ukuran ketebalan font {font-weight: nilai_font;} yang paling umum, perhatikan juga indikator hijau pada gambar, itu merupakan tanda aman atau nilai kecepatan loading (pemuatan font) tersebut. jika kita memilih 3 ukuran ketebalan font misal 400,700, dan 800 maka indikator hijau biasanya berubah jadi kuning atau merah, memberi tanda bahwa memilih 3 ukuran font akan membuat loading (pemuatan) font lebih berat.
  • Tab-Embed, Copy kedua kode yang di berikan google font, simpan di notepad atau catatan untuk sementara.
Cara Memasang Google Font ke Template Blog
  1. Login ke Dashboard Blogger > klick Template > Edit Html
  2. Cari kode penutup tag-heading yaitu </head> dan pastekan kode google font tepat di atas </head> kemudian save template.
  3. Lihat contoh di bawah ini.
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
</head>
Catatan: proses pemasangan google font ini belum selesai, jika pada saat menyimpan template ternyata template kita tidak bisa menyimpan kode google font tersebut, karena format template berbeda dengan kode google font, maka ubahlah kode google font tersebut menjadi seperti berikut ini.
<link href='https://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet'/>
Perhatikan perbedaan nya ada pada tanda kutip satu ' dan tanda kutip dua " dan bagian ujung kode yaitu />.

Simpan kembali kode google font tepat di atas tag </head>, jika template tetap tidak bisa menyimpan nya maka parse kode google font tersebut klik untuk memparse. script apapun kalau sudah di parse insya allah masuk ke template blog apapun.

Setelah kode tersebut disimpan di dalam area heading tag template, maka langkah selanjut-nya memasang css google font (kode yang kedua) yaitu (font-family: 'Raleway', sans-serif;).
Masukkan kode css google tepat di atas kode ]]></b:skin> dengan format seperti di bawah ini.
p {
  font-family: 'Raleway', sans-serif;
}
Huruf "p" berarti paragraf, maka css di atas meminta "tampilkan semua paragaf text dengn font raleway". sedangkan fungsi sans-serif; adalah font cadangan, jika jaringan internet sedang tidak bagus maka font raleway akan di gantikan dengan sans-serif untuk pemuatan (loading) yang lebih singkat.

Selain dengan format seperti di atas, css google font juga bisa di pasang dengan format seperti contoh berikut ini.
.post-body {
  font-family: 'Raleway', sans-serif;
}
.post-body adalah id laman artikel, jadi semua yang di dalam laman artikel akan dimuat dengan tampilan huruf (font) raleway. Supaya artikel ini lebih panjang lagi, maka saya kasi contoh lagi yaitu memasang css google font dengan format seperti berikut ini.
.post-body,.post-tittle,.popular-post {
  font-family: 'Raleway', sans-serif;
}
Css tersebut artinya meminta judul artikel, laman artikel, dan post popular di tampilkan dengan jenis huruf raleway.

Catatan Penting:
.post-body, .post-tittle, dan .popular-post merupakan "id" element yang umum pada template blogger, tapi jika template anda tidak menggunakan "id" seperti itu, maka kamu bisa lakukan inspect element untuk mengetahui "id" setiap element template anda, awali dengan memberi tanda titik di belakang id dan pisahkan id dengan tanda koma, seperti terlihat pada contoh css diatas, cukup sekian penjelasan saya mengenai cara memasang google font ke template blogger.

Post a Comment Subscribe

Note: Subscribe terlebih dahulu untuk memposting komentar, Kami akan segera kembali untuk meninjau dan menanggapi respon dari anda.

 
Top