Tutorial Cara Menambah Dan Mengganti Font di Blog WordPress | Via CSS

by on 2012/07/21 · 9 comments

FontSudah bosan lihat tampilan Font Blog kamu yang itu-itu saja, yang bawaan dari default  template atau default theme blog? Ingin menambah jenis font kemudian mengganti atau mengubah font yang ada dengan font lain? Jangan kuatir, pada artikel ini saya mencoba memberikan sedikit pemahaman melalui Tutorial mudah bagaimana cara menambah atau mengintegrasikan font lain dalam blog WordPress Selfhosting secara manual menggunakan CSS.

Ide Menambah – Mengganti – Mengubah  Font

Tujuan Utama mengganti jenis font adalah untuk  lebih mempercantik Tampilan dari desain Blog, sesuai dengan nuansa dari Tema Utama Blog kamu. Yang kedua adalah suka-suka…bener nggak?  Maka untuk itu dan yang perlu diperhatikan : usahakan font yang dipilih tidak terlalu besar kapasitas-nya dan jangan terlalu banyak font yang harus diaplikasikan, yang akhirnya membuat loading dari blog malah tambah berat. Karena font sendiri membutuhkan rendering ( perhitungan matematis ) saat dipanggil dalam halaman web. Well, dari sini mulailah merancang, kira-kira elemen blog mana yang harus kamu ganti jenis font-nya. Apa Judul Artikel, Konten/Isi Blog, Sidebar atau elemen lain…terserah deh.

Alasan tidak menggunakannya Plugin WordPress untuk menambah font, karena kebanyakan Plugin Add Font WordPress untuk menambah Fonts memanfaatkan Google Fonts (http://fonts.googleapis.com) sebagai basis data font, yang notabene render dan loading-nya lama. Karena logika-nya untuk ditampilkan di halaman web harus mengambil dahulu jenis font dari database di server Google (belum lagi kadang ada link yang aktif yang secara background terhubung ke situs si Developer Plugin…nambah berat ya…?). Kamu tahu-kan bahwa font adalah salah satu elemen/komponen web?…Sekali lagi loading keseluruhan komponen web menjadi pilihan yang harus diperhitungkan.

Menambah Fonts Memanfatkan Kode Via CSS Dan Hosting

Jadi mudahnya, kita di sini memakai Kode CSS untuk mengintegrasikan Font pada Blog Selfhosting. Untuk itu, font diletakkan di hosting dimana Blog kita berada…Sehingga saat pengambilan font yang diinginkan sistem, proses tampil-nya tidak terlalu lama/berat loadingnya, apalagi kita memanfaatkan CSS…pasti lebih cepet deh!

Langkah-langkah cara menambahkan font di Blog WordPress :


  • Cari – Pilih – kemudian Download dahulu Fonts kesukaan kamu lewat Internet atau dari koleksi font di localdisk (komputer/kompi kamu) atau bahkan dari CD/DVD King of Fonts. Format Font yang yang dipilih bisa .ttf (TrueType Font), .otf (OpenType Font), .eot (Embedded OpenType), .svg (Scalable Vector Graphics), .woff (Web Open Font Format) dan sebagainya. Kamu bisa baca aturan tentang kompatibilitas format font pada Web Browser di CSS3 Fonts .
  • Untuk contoh, saya menggunakan 2 buah Font Family atau Font Face yaitu Tangerine.ttf dan YanoneKaffeesatz.ttf  ( format .ttf support hampir di semua Web Browser ; Firefox, Chrome, Safari, Opera ) yang rencananya saya inject di default WordPress Themes Twenty Eleven versi 1.3 Engine Core WordPress 3.4.1. Untuk itu kita perlu upload font-font tersebut ke Hosting lewat Cpanel ataupun Software FTP seperti Filezilla, yang sebelumnya kita buat Folder dahulu dengan nama ‘Fonts’ di dalam direktori default Themes (blogger bilang : jadikan satu folder atau letakkan di folder yang sama). Berikut gambar ilustrasi-nya :
Direktori Fonts
  • Download file style.css di direktori Default Theme (Twenty Eleven) ke localdisk, kemudian edit menggunakan editor semacam Wordpad Windows atau Notepad++. Gunakan   @font-face rule untuk integrasi font dalam file style.css. Kode atau skrip lengkapnya sebagai berikut : ( dalam contoh ini Font yang saya ganti adalah Font untuk Judul Artikel, kode CSS-nya : .entry-title  )

@font-face {

font-family: YanoneKaffeesatz ;

src: url(fonts/YanoneKaffeesatz.ttf) format(“truetype”);

}

.entry-title {

clear: both;

color: #222;

font-size: 26px;

font-weight: bold;

line-height: 1.5em;

padding-bottom: .3em;

padding-top: 15px;

}

.entry-title,

.entry-title a {

color: #222;

text-decoration: none;

font-family: “YanoneKaffeesatz” , Arial;

}

Pemahaman Dan Keterangan Kode

Di sinilah pemahaman-nya, saat kamu upload jenis font, itu cuman menambahkan doang itu font di folder hosting blog. Sedangkan kode berwarna hijau itu merupakan kode perintah untuk menambah jenis font dari folder hosting ke sistem (memanggil). Kemudian Kode dengan warna oranye inilah yang merupakan kode perintah untuk mengganti atau mengubah jenis font pada elemen yang dituju!…oiii JANGAN SALAH YA antara istilah menambah dan mengganti/mengubah!

Kode/skrip dengan warna oranye adalah kode yang telah kita buat dan disisipkan. Fonts Arial ditambahkan, agar jika terjadi kesalahan pemanggilan Font Utama-Yanone Kaffeesatz, maka Font Arial-lah yang akan menggantikannya. Kamu bisa menambah jenis font lain seperti Sans-serif, Verdana atau yang lain untuk urutan font selanjutnya (font sistem—Browser/OS)…paham ya?

Ok jika sudah mengerti, jangan lupa Save/simpan perubahan, kemudian silahkan Upload kembali ke direktori Default Theme di hosting, lalu Reload halaman Web kamu, home page atau single post/page untuk melihat perubahan yang terjadi. Kira-kira dengan menambah atau mengubah Font untuk Judul Artikel hasilnya seperti gambar ilustrasi berikut :

Font Tangerine

Font Yanone Kaffeesatz

Tutorial ini hanya sekedar contoh untuk mengubah jenis Font Judul Artikel. Untuk konten, sidebar atau elemen blog yang lain silahkan kamu coba-coba sendiri, sesuai selera dan tema dari BLOG. Yaach..tentunya kamu harus paham juga mengenai kode-kode atau skrip dalam CSS yang mewakili tiap elemen BLOG (style sheet Themes), seperti Judul Artikel mempunyai kode .entry-title di atas dan  istilah-istilah basic CSS ( syntax-attribute : selector, declaration, property, value).

5 / 5 stars     

Artikel ini ditulis oleh Mazdodot

Yang telah menulis 105 Artikel dalam Blog Kumpulan Artikel.

Nama aslinya Ade Setijo K, pemilik resmi situs dotcomcell.com, melalui blog ini mencoba berbagi ilmu dan pengalaman tentang Desain Web, Handphone, Komputer, Android, Multimedia, Tips Trik, Wordpress...read more >>

{ 9 comments… read them below or add one }

4life4bisnis October 20, 2012 at 11:41 AM

makasih banget

Reply

Remaja Sampit October 22, 2012 at 9:34 PM

Pinter kang admin,,,
ayo kita saling berbagi ilmu gan
Salam

Reply

Deni Kurniawan February 23, 2013 at 7:15 AM

Thanks.. your these article is very usefull for me.

Reply

Ratu nusantara June 8, 2013 at 12:42 PM

Infonya menaik gan

Reply

cara membuat blog June 8, 2013 at 9:42 PM

Tutorial yang saya cari2, kebanyakan pake font google, pas mantap mas, langsung nih dipraktekkan.

Terimakasih banyak mas.

Reply

sufyan November 16, 2013 at 11:16 PM

makasih kang, artikelnya cukup membantu :)

Reply

Info Korupsi December 4, 2013 at 12:29 PM

Terima Kasih Infonya….. Muda2han bisa

Reply

Belanja Hemat February 25, 2014 at 8:29 AM

Sangat membantu… Coba ngedit CSS dulu….

Reply

andi November 19, 2014 at 5:12 AM

mau tny ini d kode css sy apany yg salah sb ga berubah font nya, tapi colornya bs berubah
[code]
@font-face {
font-family: ‘HenryMorganHand';
src: url(‘fonts/HenryMorganHand.ttf’) format(‘truetype’);
}
.widget > h3 {color:#6666FF;font-family:”HenryMorganHand”;}
[/code]

kl font asli tema yg sy pakai seperti ini formatnya

[code]
@font-face {
font-family: ‘Titillium';
src: url(‘fonts/titillium-light-webfont.eot’);
src: url(‘fonts/titillium-light-webfont.svg#titillium-light-webfont’) format(‘svg’),
url(‘fonts/titillium-light-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/titillium-light-webfont.woff’) format(‘woff’),
url(‘fonts/titillium-light-webfont.ttf’) format(‘truetype’);
font-weight: 300;
font-style: normal;
}
[/code]

fontya saya simpan disini
wp-content\themes\hueman\fonts

Terima kasih

Reply

Leave a Comment

Previous post:

Next post: