Cara Termudah Mengganti Font Blogger

Cara Termudah Mengganti Font Blogger

Cara Mengganti Font Blogger - Konten utama sebuah blog adalah tulisan atau teks. Tulisan yang bagus akan lebih enak dibaca. Ibarat seperti kita menulis disebuah kertas, ketika tulisan kita bagus, orangpun akan betah dalam membaca tulisan kita.

Tulisan atau lebih spesifiknya huruf memiliki gaya dan bentuk yang bermacam-macam yang bisa kita sebut dengan font.

Font sendiri merupakan salah satu hal yang penting dalam sebuah desain, khususnya desain template blogger.

Dalam pemilihan font, hal yang harus kita tekankan pertama kali bukanlah seberapa indah font tersebut, melainkan seberapa nyaman font tersebut dibaca pengunjung.

Kembali lagi tujuan utama sebuah blog sendiri yaitu menyajikan konten berisi tulisan. Jika tulisan tidak bisa dibaca pengunjungpun juga tidak akan betah lama-lama di blog kita.

Jadi dalam mengganti font blogger kita tak hanya memperhatikan aspek desain namun aspek kenyamanan juga. Langsung saja ke tutorial cara mengganti font blogger BAB 3 dalam pembuatan template blog sendiri.

Cara Mengganti Font Blogger

Situs Penyedia Font

Situs penyedia font sebenarnya banyak, ada yang gratis dan berbayar. Untuk font yang akan kita gunakan di praktik kali ini saya sarankan ambil dari google font saja. Dikarenakan kita tidak usah susah-susah menghosting font tersebut. Tinggal kita import menggunakan CSS.

Di google font pun jenisnya juga sangat banyak, jadi tidak usah khawatir kehabisan pilihan

Pemilihan Jenis Font

Jenis font ada banyak sekali. Namun yang direkomendasikan untuk blog khususnya untuk isi konten dan judul ada 2, yaitu serif dan sans-serif.
pasang google font di blogspot

Serif

Serif yaitu jenis atau bentuk font yang memiliki kait diujungnya garisnya. Contoh: Times New Roman, Roboto Slab, dll

Sans-serif

Sans-serif yaitu kebalikan dari serif yang berarti tidak memiliki kait diujungnya. Contoh: Arial, Roboto, dll

Kita bisa memilih salah satu dari jenis font tersebut atau bisa pilih ke-duanya dan dikombinasikan nanti.

Cara mudah mengganti font template blogger

Akses situs fonts.google.com

Filter category dengan ceklist serif dan sans-serif.
cara mengganti font blogger

Pilih font yang diinginkan.
Rekomendasi saya untuk serif bisa pakai roboto slab, noto serif, atau merriweather dan untuk sans-serif bisa pakai roboto, noto sans, open sans, quicksans, poppins, dll.

Di tutorial kali ini saya menggunakan noto sans(sans-serif) dan merriweather(serif). Sobat bisa memilih sesuai selera saja yang terpenting tulisan masih bisa dibaca.

Selanjutnya akan ada pilihan style yang akan diimport.
cara ubah font blogspot

Seleksi style dengan cara klik tombol +Select this type.
mengubah font blog

Normalnya yang akan digunakan dalam blog kita yaitu regular 400, regular 400 italic, dan bold 700. Tapi jika kalian ingin seleksi semuanya juga tidak masalah, barangkali kedepannya font akan divariasikan ke beberapa elemen tambahan.



Akan muncul menu disamping kanan layar kita.

Fokus ke use on the web.
memasang fonts google di blogger



Seleksi link yang saya tandai seperti diatas dan copas ke word atau notepad dahulu. Intinya disimpan lah
https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400

Jangan lupa CSS rules juga kita simpan dahulu, yang nantinya digunakan untuk memanggil font yang sudah kita import.

font-family: 'Noto Sans', sans-serif;

Cara pasang google font di blog

Masukkan kode berikut diatas </head>

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
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("link disini")
//]]>
</script>
Ganti link disini dengan url font google yang sudah disimpan tadi Jika font yang diimpor lebih dari satu tambahkan loadCSSnya lagi. Kurang lebih seperti berikut

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
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("link disini"); loadCSS("link disini")

//]]>
</script>
Untuk hasil akhir dari script kurang lebih menjadi seperti ini

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
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/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700"); loadCSS("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400;1,700")

//]]>
</script>
Jika sudah tambahkan CSS font family ke elemen yang ingin kita ganti fontnya.

Untuk yang mengikuti panduan membuat template blog sendiri, pertama kita ganti font secara keseluruhan atau font yang akan digunakan untuk konten utama.

Cari kode CSS body yang sudah kita tambahkan di seri sebelumnya seperti berikut

body{
	position: relative;
	background-color: #f8f8f8;
	font-size: 14px;
	color: #656565;
	word-wrap: break-word;
	margin: 0;
	padding: 0;
}
Tambahkan CSS rules didalamnya menjadi kurang lebih seperti berikut

body{
	font-family: 'Noto Sans', sans-serif;
	position: relative;
	background-color: #f8f8f8;
	font-size: 14px;
	color: #656565;
	word-wrap: break-word;
	margin: 0;
	padding: 0;
}
Untuk font judul silahkan cari CSS heading, yang kurang lebih seperti ini

h1,h2,h3,h4,h5{display:block;font-weight:700}
Tambahkan CSS font family menjadi seperti berikut

h1,h2,h3,h4,h5{display:block;font-weight:700;font-family:'Merriweather',serif}
Simpan template dan reload blog sobat. Maka font otomatis sudah akan berganti.
mengubah judul font blog blogger

Jika terdapat error atau kesulitan bisa ditanyakan langsung di komentar. Atau bisa cocokkan source code kalian dengan source kode punya saya.

Berikut bisa didownload hasil akhir source code pada sesi kali ini

Selamat, sampai disini kalian sudah menyelesaikan BAB 3 dalam Tutorial Membuat Template Blog Sendiri Untuk Pemula Terlengkap.

Silahkan lanjut ke bab berikutnya atau bisa lihat Daftar Isi Panduan Membuat Template Blog Sendiri Untuk Pemula
Show comments
Hide comments

2 comments:

  1. Mantap... step by step pembuatan templatenya
    btw, saya lebih suka menggunakan @font-face

    ReplyDelete
    Replies
    1. makasih suhu
      saya juga kang, cuma biar lebih simpel aja kalau pake js, tinggal copas linknya :D

      Delete