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.
Daftar isi
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.
Serif
Serif yaitu jenis atau bentuk font yang memiliki kait diujungnya garisnya. Contoh: Times New Roman, Roboto Slab, dllSans-serif
Sans-serif yaitu kebalikan dari serif yang berarti tidak memiliki kait diujungnya. Contoh: Arial, Roboto, dllKita 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.comFilter category dengan ceklist serif dan sans-serif.
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.
Seleksi style dengan cara klik tombol +Select this type.
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.
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>
<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>
<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>
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;
}
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;
}
h1,h2,h3,h4,h5{display:block;font-weight:700}
h1,h2,h3,h4,h5{display:block;font-weight:700;font-family:'Merriweather',serif}
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
btw, saya lebih suka menggunakan @font-face
saya juga kang, cuma biar lebih simpel aja kalau pake js, tinggal copas linknya :D