Cara Mengganti Jenis & Ukuran Huruf (Font) di Blog dengan Mudah

Kali ini saya akan menjelaskan tutorial bagaimana caranya mengganti (mengubah) jenis dan ukuran huruf di Blogger / Blogspot dengan mudah.

Bahasa lain dari jenis huruf adalah Font. Kalau ingin mengubah jenis huruf di blog, kalian harus download Font-nya di situs Google Fonts.

Cara Mengganti Jenis & Ukuran Huruf (Font) di Blog

Di dalam artikel ini, kalian akan diberikan cara mengganti Font di Template Blogger dengan cara yang paling mudah.

Login ke Blogger > Tema > Edit HTML

Di dalam Template Blog, cari kode font-family atau font. Kira-kira kode lengkapnya seperti ini:

.post-body{
line-height:1.4;
font: 16px Google Sans, Sans Serif
}

Ganti kode Google Sans, Sans Serif dengan Arial atau dengan jenis huruf lainnya. Perhatikan juga angka 16px, angka ini adalah ukuran Font.

Sebenarnya pun kalian bisa memisahkan antara ukuran Font dan jenis Font. Kodenya seperti ini:

.post-body{
line-height:1.4;
font-family: Google Sans, Sans Serif;
font-size:16px
}

Atau seperti ini:

.post-body{
line-height:1.4;
font: 500 16px Google Sans, Sans Serif
}

Ada angka 500, kan? Itu adalah angka yang menunjukkan Bold atau huruf tebal. Bold tertinggi saat ini adalah 700, sedangkan ketebalan huruf yang paling kecil adalah 300.

Atau boleh juga seperti ini:

.post-body{
line-height:1.4;
font-family: Google Sans, Sans Serif;
font-size:16px;
font-weight: 400
}

Kalian bisa menyesuaikannya sendiri di Template Blogger yang dimiliki.

Cara Mengganti Jenis & Ukuran Huruf (Font) di Template Blogger

Kalau cara saya sih seperti ini ketika ingin mengubah jenis dan huruf di blog.

Login ke Google Fonts > Cari salah satu, misalnya Roboto > Klik Roboto > Select This Font

Nanti kalian akan diberikan URL JavaScript (Js) dari Roboto seperti ini:

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

Simpan kode di atas, di antara kode di bawah ini:

<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("Lokasi-JavaScript-di-Sini");
//]]>
</script>

Hasilnya akan seperti ini:

<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");
//]]>
</script>

Lalu simpan kode JavaScript (Js) di atas, tepat di atas kode </head>.

Apabila kode JavaScript (Js) di atas sudah ada di Template Blogger, cukup disesuaikan saja. Ganti bagian yang perlu digantikan.

Supaya teks tebalnya sempurna (opsional), silakan klik Customize tepat setelah masuk ke menu Select This Font.

Kira-kira hasilnya seperti ini:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">

Atau seperti ini:

<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,500,700");
//]]>
</script>

Perhatikan di ujung kanan atas, Load Time: Moderate. Artinya, apabila terlalu banyak memilih dan/atau menggunakan Opsional, bisa memberatkan loading blog.

Setelah memasang JavaScript (Js) dari Google Fonts, sekarang kalian harus memanggil Font tersebut agar mau tampil di blog dengan sempurna.

font-family: 'Roboto', sans-serif;

Di atas adalah CSS yang digunakan untuk memanggil jenis huruf Roboto.

Cara mengaplikasikannya seperti di atas tadi, seperti ini:

.post-body{
line-height:1.4;
font-family: 'Roboto', sans-serif;
font-size:16px
}

Sudah paham, kan?

Jika dirasa semua pengaturan sudah Oke, silakan tekan tombol Save untuk menyimpan settingan Template Blogger. Cek hasilnya.

Itu dia tutorial bagaimana caranya mengganti (mengubah) jenis dan ukuran huruf di Blogger / Blogspot dengan mudah.*