Cara Merubah Bentuk Huruf atau Font Blog

Kali ini saya akan mencoba berbagi tentang cara merubah bentuk huruf atau font di blog. Sebenarnya saya sendiri lupa-lupa ingat sudah atau belum membuat tutorial ini namun tidak ada salahnya toh jika saya buat lagi. Mungkin masih banyak blogger yang penasaran bagaimana sih cara merubah bentuk huruf atau font di blog kesayangannya. Karena biasanya bagi yang blogger yang senang berkreasi dengan blognya akan menggunakan jenis font yang berbeda untuk setiap bagian di blognya seperti header, content, sidebar, navbar, hingga footer. Karena memang perpaduan jenis font yang berbeda akan menimbulkan efek tersendiri seperti kesan mempertegas atau memperjelas.

Contohnya saja seperti di blog seojaguars.com ini dimana saya menggunakan jenis font yang berbeda di header, content, sidebar, dan navigasi breadcrumb. Yang paling mencolok mungkin penggunaan font berbeda di navigasi breadcrumb dimana ini memberikan efek seperti blur dan sedikit kurang jelas. Hal ini memang disengaja karena mengingat siapa sih yang mau membaca breadcrumb toh jusulnya lebih jelas dan bagi saya breadcrumb hanyalah pelengkap rasa SEO di blog ini.
Baiklah mari kita budayakan sedikit bicara dan banyak bekerja. Silahkan persiapkan blog anda yang akan di edit. Jika perlu backup dulu template yang anda gunakan untuk mencegah hal-hal yang tidak di inginkan.
Kita mulai dengan cara merubah jenis font secara keseluruhan. Langkah yang kita lakukan adalah sebagai berikut.

• Buka bagian CSS template yang anda gunakan.
• Gunakan fungsi ctrl+f dan cari elemen body.
• Secara umum kode CSS yang ada akan terlihat seperti di bawah ini,

body{
background:#333;
color:#555;
font-family:”Sylfaen“,Tahoma,Helvetica,Sans-serif;
font-size:14px;
}

• kode berwarna merah adalah jenis font yang akan kita ganti.
• Selanjutnya ganti kode font yang ada tersebut dengan jenis font yang anda inginkan.

Bagaimana apakah anda sudah mengerti?
“maaf, saya tidak tahu nama jenis font yang saya inginkan.”
Tenang saja kita bisa merubah huruf atau font yang ada dengan puluhan bahkan mungkin ratusan jenis font yang ada. caranya adalah lihat saja di ms. word yang terinstal pada komputer atau laptop yang anda gunakan. Untuk lebih jelasnya silahkan lihat gambar di bawah ini.

Bagaimana banyak bukan? Silahkan pilih salah satu dan gantikan pada kode berwarna merah di atas.
Langkah yang sama bisa kita lakukan pada bagian yang lain secara spesifik. Yakni dengan mengganti atau menambahkan elemen font di dalam setiap bagian template.
Untuk bagian header (judul blog) maka gunakan cara yang sama dengan langkah di atas dan cari kode CSS title. Secara umum bentuknya seperti di bawah ini.

#title a{
text-decoration:none;
color:#FFF;
height:35px;
display:block;
font:normal 20px “Sylfaen“, sans-serif;
letter-spacing:0;
}

Seperti sebelumnya kode berwarna merah adalah jenis font yang akan di ganti.
Bagaimana jika tidak ada tag font di bagian yang akan diganti? Itu berarti bagian tersebut menggunakan CSS secara umum pada tag body seperti yang kita ubah sebelumnya. Untuk mengatasinya kita hanya tinggal menambahkan sedikit kode CSS tambahan berikut ini.

font:normal 20px “Sylfaen“, sans-serif;

normal, adalah bentuk tampilan font bisa dirubah italic untuk miring atau underline untuk bergaris bawah.
20px, adalah ukuran font.
sylfaen, adalah jenis font yang akan diganti.
sans-serif, adalah jenis famili (bisa diabaikan).
Trik yang sama bisa kita gunakan juga untuk bagian lainnya dengan menggunakan langkah yang sama dengan langkah sebelumnya. Untuk mempermudah berikut daftar tag elemen yang biasa saya rubah.

• header/title, untuk merubah jenis font pada judul blog.
• content, untuk merubah jenis font pada postingan.
• sidebar, untuk merubah jenis font pada sidebar.
• footer, untuk merubah jenis font pada bagian footer.

Caranya tinggal mencari tag tersebut di bagian CSS dengan menggunakan fungsi ctrl+f untuk mempermudah.
Bagaimana mudah bukan mengganti font sesuka anda? Dan kini blog anda bisa lebih berwarna.