Trik Manipulasi Font (Merubah Ukuran dan Jenis) di WordPress Gratisan


Bingung mau merubah ukuran dan jenis font di WordPress yang gratisan/tanpa harus upgrade menggunakan font typekit yang harganya $30 setahun itu? Tenang, itu semua bisa disiasati dengan trik sederhana berikut. Begini caranya:

Sekedar Info Sederhana:

Sumber Asli: situswahab.wordpress.com
Penggunaan huruf dengan ukuran jumbo
juga bisa diterapkan dalam wordpress. Teknik ini tidak menggunakan Worpress versi berbayar/yang sudah diupgrade, tapi tetap yang GRATISAN dengan sub domain wordpress.com seperti SitusWahab   yang sedang anda baca ini.

enak bukan???

Bukan cuma ukuran font yang bisa dirubah, tapi jenis font juga bisa diganti seperti tulisan di atas. (Jika saat membaca halaman ini anda tidak melihat adanya tulisan warna-warni yang besar dan jenisnya bervariasi, berarti saat itu WP telah menghilangkan fungsi kode CSS di post WP gratisan ini dan berarti percuma anda terus membaca trik ini.😦 )

Cara ini pastinya sudah basi bagi blogger yang sudah malang melintang di dunia edit-mengedit HTML dan CSS, tapi bagi newbie/pemula bisa jadi jurus yang sangat bermanfaat karena WordPress gratisan–setidaknya sampai tulisan ini dibuat–tidak memberikan fitur pengubah ukuran dan jenis font seperti yang ada di editor text milik blogspot.

Untuk menggunakan teknik format font ini sangat mudah, yaitu dengan menggunakan kode CSS. Bagi para newbie, silakan hafalkan kode tag berikut:

  • Untuk membuat header gunakan tag: <h1>header anda</h1>
  • Untuk membuat paragraf gunakan tag: <p>paragraf anda</p>
  • Untuk memformat bagian tertentu saja dari kalimat/paragraf, gunakan tag: <span>bagian yang akan diformat</span>

Ada banyak kode lain, tapi tiga kode tersebut yang paling sering digunakan dan rasanya sudah mencukupi untuk topik ini, jadi saya cukupkan memperkenalkan tiga kode itu saja. Untuk kode lainnya silakan tanya ke mbah Google😦 Selanjutnya, anda harus menambahkan kode CSS seperti contoh berikut dalam tag pembuka yang akan dipakai:

style="font-family:arial;font-size:20px;"

Pada bagian font-family isikan dengan nama font yang dikehendaki. Dalam contoh pada kode tersebut saya memakai font arial. Silakan diganti dengan nama font lain, tapi usahakan hanya memakai font yang umum dimiliki semua komputer semisal Arial, Times New Roman, Monotype Corsiva dan lain-lain, sebab kalau tidak maka tampilannya akan berubah menjadi font default browser.

Pada bagian font-size silakan isikan ukuran yang dikehendaki dalam ukuran pixel, bukan ukuran point seperti di Microsoft Word. Dalam contoh kode di atas berarti ukurannya 20 pixel.

Contoh penerapan:

<h1  style="font-family:arial;font-size:20px;">text header anda</h1>
<p  style="font-family:arial;font-size:20px;">text paragraf anda</p>
<span  style="font-family:arial;font-size:20px;">text bagian yang akan diformat</span>

Untuk membuat tulisan/font kedap-kedip dalam wordpress seperti lampu hias di atas, silakan tambahkan attribut ini dalam CSS-nya:

text-decoration: blink;

Contoh kode lengkapnya seperti ini:

<span  style="font-family:arial;font-size:20px;text-decoration:blink">text bagian yang akan diformat</span>

Sebagai tambahan, pada bagian font-family tidak hanya bisa diisi dengan satu jenis font, tapi beberapa font sekaligus sebagai cadangan apabila font di urutan pertama tidak ada maka gunakan yang urutan kedua dan seterusnya. Caranya cukup pisahkan nama-nama font tadi dengan tanda koma (,) dengan urutan yang dikehendaki. Pastikan penulisan nama font pas benar ejaannya agar bisa berfungsi.

Selamat mencoba dan berkreatifitas.

Karya Asli Abdul Wahab

Perihal Abdul Wahab
Lecturer, Writer and Chief of Aswaja Center Jember.

7 Responses to Trik Manipulasi Font (Merubah Ukuran dan Jenis) di WordPress Gratisan

  1. Ardyan Satya mengatakan:

    Wah triknya suskes mas di blog saya.. makasih yo😀
    btw untuk font Century Gothic ada disetiap komputer gak ya?

  2. pre mengatakan:

    makasih mas tutorialnya
    huruf besar buat nentuin H1
    kalau gak huruf besar nanti H1 nya ada 6,kayak punya saya😀

  3. nong mengatakan:

    saya coba dulu gan

  4. Achmad Fauzi mengatakan:

    wow bagus trixnya. code selengkapnya ada dimana mas ?

    trims😀

    • Abdul Wahab mengatakan:

      yang paling lengkap kayaknya di w3schools.com silakan kunjungi bila ingin belajar serius. bila kesulitan dengan bahasa inggris, silakan gunakan google translate. trima kasih kunjungannya.

  5. fatkhan mengatakan:

    makasih mas bro! saya tertolong dengan artikel ini setelah otak atik css gak nemu juga solusintya haha.. maklum nyebi

    • Abdul Wahab mengatakan:

      sama-sama. Senang mengetahui artikel iseng ini ternyata bermanfaat. trima kasih kunjungannya.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s