Cara Install Google Font Ke Template Blog

Cara Install Google Font Ke Template 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 17 px, sedangkan jenis font yang ideal untuk situs web/blog adalah open sans, arial reguler, raleway dan masih banyak lagi, namun intinya pilihlah font yang umum rapi dan ringan, sehingga tidak mengejutkan mata pembaca dan memberatkan loading situs.

Bagaimana Cara Mengganti Jenis Huruf (font) Pada Template Blog?

Login ke blogger, klik template > klik 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 tersebut, maka solusinya kita bisa menggunakan google font dengan cara menginstalnya langsung ke template blog. Google memiliki 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.

Memilih Jenis dan Mengambil Kode Font

1. Kunjungi https://fonts.google.com untuk memilih font
2. Setelah menemukan jenis font yang tepat, klick tanda +,
3. Setting sedikit pada jendela yang muncul seperti gambar di bawah ini.

Memilih jenis dan ukuran font

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 HTML Template

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 kode </head> kemudian save template.

Lihat contoh di bawah ini.
[code type="HTML"]<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
</head>[/code]
Catatan: Proses pemasangan google font ke html template belum selesai, jika pada saat menyimpannya ternyata terjadi error (template kita tidak bisa menyimpan kode google font) tersebut, maka ubah kode google font tersebut menjadi seperti berikut ini.
[code type="HTML"]<link href='https://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet'/>[/code]
Perhatikan perbedaannya ada dibagian ujung kode yaitu; penambahan string di sebelum penutup tag />.
Selanjutnya simpan kode google font tepat di atas tag </head> seperti yang telah dijelaskan diatas, Setelah kode google font tersimpan, maka langkah selanjut-nya tinggal menyeting css elemen yang di targetkan misalnya elemen p atau paragraf contoh: p{font-family: 'Raleway', sans-serif;}
Masukkan kode css google tepat di atas kode ]]></b:skin> dengan format seperti di bawah ini.
[code type="CSS"]p {
  font-family: 'Raleway', sans-serif;
}[/code]
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;
[code type="CSS"].post-body {
  font-family: 'Raleway', sans-serif;
}[/code]
Kode .post-body adalah class name atau id target untuk 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;
[code type="CSS"].post-body,.post-tittle,.popular-post {
  font-family: 'Raleway', sans-serif;
}[/code]
Css tersebut artinya meminta judul artikel, laman artikel, dan post popular di tampilkan dengan jenis huruf raleway.

Penting: kode .post-body, .post-tittle dan .popular-post merupakan "id" element yang umum pada template blogger, lakukan inspect element untuk mengetahui "id atau class name" setiap element template anda, awali dengan memberi tanda titik di belakang name class dan pisahkan masing-masing name class dengan tanda koma, seperti terlihat pada contoh css diatas, tambahkan font-size untuk mengatur ukuran font dan font-weight untuk berat atau bobot font seperti contoh berikut;
[code type="CSS"].post-body atau body{font:normal normal 17px 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;line-height:1.42857143;color:#616161;font-weight:400;}[/code]
font-weight:400; merupakan bobot font normal dan font-weight:700; merupakan bobot font bold atau tebal, saya fikir cukup sekian penjelasan saya mengenai cara memasang google font ke template blogger semoga dapat membantu anda menyelelesaikan maslah font web.