Cara Mengganti Font Dengan CSS

Terkadang kita sangat jengkel, karena di Blog kita Fontnya gitu-gitu aja, nah kali ini saya mau kasih tutorial Sederhana yang bisa kalian terapkan, Mengganti Font dengan CSS. Penggantian font dengan font CSS lain, meskipun sederhana tampilannya, namun cukup aman dan cepat di load, karena Browser dan Computer telah memiliki database font-font tersebut (disebut "Web Safe Fonts").

Sekilas Tentang Jenis Font (font family) dalam CSS

Jenis font dalam CSS dinyatakan dengan properti font-family. sehingga dalam penulisannya, deskripsi CSS font-family dituliskan seperti contoh berikut:

p {font-family: "Times New Roman";....;}

atau dipersingkat dengan shorthand (dituliskan dengan font saja):

p {font: "Times New Roman";....;}

Ada dua kategori jenis font:

a. Font family: Nama-nama utama (root name) font, misalnya "times", "arial", courier", dll.

b. Generic family: Nama-nama font turunan, misalnya "serif", "sans serif", "cursive", dll.

Penulisan font-family yang sering kita jumpai dalam CSS terdiri dari font-family dan generic family. Keduanya dituliskan berurutan dengan tujuan apabila sebuah font tidak tersedia dalam database suatu browser, maka browser akan merujuk pada jenis font lain yang telah dituliskan di belakangnya.

Contoh:

 p {font-family:  "Times New Roman",Georgia,Serif;...;}

Font Pada Template Blogger

Pada dasarnya font di dalam template Blogger ditentukan dengan CSS styling, sehingga jika harus mengubah jenis font, maka jelas perubahan dilakukan pada CSS-nya. Ada dua cara yang biasanya digunakan untuk membuat default font pada template Blogger:

1. Menuliskan variable CSS font untuk bagian-bagian (elements) tertentu, misalnya judul blog, deskripsi blog, judul posting, footer posting, footer, judul sidebar, dan seterusnya. Kemudian menuliskan variable tersebut pada font-family masing-masing elemen. Variable terletak di bagian atas CSS, biasanya setelah/dekat <b:skin><![CDATA[. Contoh variable-variable-nya:

 .......................
<Variable name="dateHeaderFont" description="Date Header Font"
type="font"
default="normal bold 117% Arial, sans-serif" value="italic normal 80% Arial, sans-serif"
 >
<Variable name="postTitleFont" description="Post Title Font"
type="font"
default="normal bold 180% Georgia, Times, serif" value="normal bold 142% Trebuchet, Trebuchet MS, Arial, sans-serif"
 >
.......................

 Sebagai contoh, jika saya ingin untuk menyatakan jenis font yang dipakai dalam judul posting (header posting), saya menggunakan nama variable (name=) postTitleFont sebagai perwakilan jenis font pada properti font family nama blog yang telah dituliskan pada variable. Nama variable yang digunakan sebagai deklarator dituliskan dengan diawali tanda $:

 .post h3 {font-family:  $postTitleFont;}

2. Menuliskan langsung jenis Font pada property-nya (font-family atau font). Contoh:

 .post h3 {font-family: "Georgia, times, serif;...;}

Mengubah Jenis Font di template Blogger/Blogspot

Sesuai dengan dua cara untuk menentukan font pada template Blogger di atas, maka pastinya cara untuk menggantinya pun ada 2, yaitu mengubah font pada variable atau langsung mengubah property font-family di setiap elemen. Mengubah variable sangat riskan karena ada nilai default dan value yang merupakan aturan general pada elemen-elemen utama blog.. Oleh karenanya, lebih baik ganti font langsung pada properti font family-nya. 

Cara mencari dan mengubah jenis font family pada setiap elemen CSS:

1. Buka Edit HTML/Template Blogger.

2. Cari elemen CSS yang ingin di ubah, letaknya antara <b:skin><![CDATA[ dan ]]></b:skin>.

3. Setiap elemen CSS di template Blogger memiliki nama berbeda sesuai yang telah diberikan oleh pembuatnya, tapi secara umum, nama-nama itu hampir mirip dan memiliki deklarator umum yang sama:

Misalnya: Untuk elemen judul posting, biasanya dituliskan dengan .post h3, .post h2, #post h3, #post h2, .h3, .h2, (h menyatakan header atau judul/title, berlaku pula untuk judul sidebar, dll), dan masih banyak lagi. Untuk isi posting biasanya dinyatakan dengan .post. Demikian dengan sidebar, ada banyak variasi namun dapat dipastikan semua mengandung kata yang sama: sidebar.

3. Setelah menemukan element yang dicari, selanjutnya cari property font-family atau font yang di belakangnya ada definisi font atau nama variable seperti contoh variable diatas. Ganti dengan jenis-jenis font baru pada bagian tersebut. Contoh:

.post h3 {font-family: Georgia, times, serif;...;}

Ganti bagian font yang berwarna biru dengan font-font lain.

atau biasanya juga ditampilkan dengan nama variable:

.post h3 {font-family:  $postTitleFont;}

Ganti bagian font yang berwarna biru dengan font-font lain.

4. Anda juga dapat menambahkan jenis font baru pada elemen yang belum memiliki aturan font-family.

Misalnya. bagian comment blog saya belum memiliki aturan jenis font khusus, maka saya dapat menambahkan font-family/font di dalam aturan CSS-nya:

Sebelumnya: 

#comments {margin: 0px 0px 0px 0px; padding: 15px 20px 15px 20px; text-align: left; color: #4c4c4c; border: 1px solid #ccc;background:#fff;}

Sesudahnya:

#comments {margin: 0px 0px 0px 0px;padding: 15px 20px 15px 20px; text-align: left; color: #4c4c4c; font: "Times New Roman", Trebuchet, Serif; border: 1px solid #ccc; background:#fff;}

5. Untuk mengetahui jenis-jenis font, cek CSS Web Safe Fonts.
6. Setelah selesai mengubah atau menambah font, save template.