CSS3-Menampilkan Font Unik Ke Blog

Hari-hari ini saya lagi seneng mengingat-ingat kembali pelajaran CSS3 yang diberikan oleh Pak Yosi Kristian, dosen Mata Kuliah Web Related Technology. Minggu ini sudah mulai membahas tentang CSS3, jadi mumpung masih hangat dan semangat, alangkah baiknya kalau didokumentasikan.

Kali ini masih berkutat dengan cara menampilkan font ke blog kita. Jika anda memiliki font yang unik dan ingin digunakan pada tampilan blog, maka anda bisa mengupload font tersebut dan menggunakannya.

Berikut langkah2nya :

1. Carilah font yang diinginkan di c:\windows\fonts dan pilihlah font yang sesuai dengan selera anda.

2. Upload-lah font tersebut ke hosting (melalui FTP atau cpanel-file manager) pada folder theme anda. Atau anda bisa mencobanya di localhost terlebih dahulu…

3. Selanjutnya, definisikan font tersebut dengan cara menambahkan code CSS3 berikut, pada file .css theme blog anda.

@font-face {
font-family : fontku; /*nama variable untuk menyimpan alamat font */
src:url(‘GIGI.TTF’); /*ketikkan URL font */
}

@font-face di atas digunakan untuk mendefinisikan font yang akan kita pakai (“GIGI.TTF”) dan menyimpannya ke dalam variabel (“fontku”), untuk kemudian kita panggil kembali (digunakan) pada langkah 4.

4. Setelah mendefinisikan font di atas, sekarang saatnya menggunakan font tersebut, misalnya saya ingin menampilkan font tersebut pada seluruh teks :

body {
font-family:fontku;
}

5. Selesai! Coba jalankan halaman web anda dan lihatlah hasilnya…

Mudah kan? Dan masih banyak yang seru di CSS3…tunggu dokumentasi saya lainnya ea… tentang Media Queries 😛