Cara Mengubah Jenis Huruf (Google Fonts) di Blogger

Kali ini, izinkan saya berbagi tutorial bagaimana caranya mengubah atau mengganti jenis huruf (Google Fonts) di template blogger (blogspot.com).

Pada laman Google Fonts, sobat akan dengan mudahnya mendapatkan berbagai gaya atau jenis huruf yang disediakan oleh Google. Contohnya seperti Roboto, Lora, Droid Sans, Open Sans Condensed, Poppins, Lato, dan Raleway. Jenisnya pun ada banyak seperti serif, sans-serif, display, handwriting, dan monospace .

Pertanyaannya, bagaimana cara mengganti dan/atau mengimplementasikan jenis atau gaya huruf yang sebelumnya sudah ada di blog?

Cara Mendapatkan (Download) Google Fonts

1. Masuk ke Google Fonts > pilih Roboto (contoh, misalkaaaann...).

2. Gulir ke bawah > pada pilihan menu Regular 400, tekan tombol tambah (+). Tambahkan juga Bold 700 apabila perlu.

3. Selanjutnya, klik menu view selected families.

Di sini, kita bisa melihat script dan kode CSS yang diperlukan.

Yang sudah kita dapatkan adalah script Roboto dan CSS-nya sendiri yakni: 'Roboto', sans-serif.

4. Selanjutnya, sobat tinggal menyesuaikan dengan langkah-langkah cara mengganti Google Fonts di blog yang ada di bawah ini.

Cara Mengubah Jenis Huruf (Fonts) di Blogger

Script yang dibutuhkan:

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Raleway:400,700");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Pada raleway, ganti dengan jenis font yang diinginkan, roboto misalnya. Contohnya:

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Roboto:400,700");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Angka 400 dan 700, yang dipisahkan dengan koma, merupakan ketebalan huruf. 400 merupakan ketebalan normal, sedangkan 700 merupakan teks yang ditebalkan. Bagaimana kalau misalkan angka 400 dan 700 tidak ditambahkan? Tampilan huruf menjadi tidak rapi.

Selanjutnya, tambahkan script di atas, tepat di atas kode </body>.

Cara Mengaktifkan JavaScript Google Fonts

Bagaimana cara mengaktifkan JavaScript Google Fonts tersebut, sehingga tampilan hurufnya sesuai dengan script yang telah dipasang?

Cari kode .post-body atau .post atau .body atau main-wrapper atau body,.body-fauxcolumn-outer.

Biasanya, sudah terpasang kode bawaan dari template blogger seperti font-family: Arial atau font: 14px Arial atau font: 14px Arial, sans-serif.

Karena sebelumnya kita ingin mengganti raleway menjadi roboto, maka ganti dengan format seperti di bawah ini:

font-family: 'Roboto', sans-serif

font: 14px Roboto

font: 14px Roboto, sans-serif

Langkah terakhir, simpan perubahan template blogger ini. Selesai.

Cara Menggabungkan 2 Jenis Huruf Google Fonts

Bagaimana kalau ingin menggabungkan dengan jenis Google Fonts di dalam satu script?

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Roboto|Raleway:400,700");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Keduanya, cukup dipisahkan dengan garis tegak | tanpa ada tambahan kode lainnya. Dengan adanya 2 jenis font yang berbeda tapi masih di dalam template blogger yang sama, yang satu bisa diterapkan untuk tampilan isi artikel, dan yang satunya lagi bisa digunakan untuk judul artikel. Keren, kan? OK selesai.

Hmm, baiklah. Begitulah tutorial bagaimana caranya mengubah atau mengganti jenis huruf (Google Fonts) di template blogger (blogspot.com). Jika ada yang kurang dimengerti, mohon ditanyakan.